Skip to content

feat: Add animation on scroll in about-us page. - #66

Open
somesh202 wants to merge 3 commits into
COPS-IITBHU:mainfrom
somesh202:anim-about-us
Open

feat: Add animation on scroll in about-us page.#66
somesh202 wants to merge 3 commits into
COPS-IITBHU:mainfrom
somesh202:anim-about-us

Conversation

@somesh202

Copy link
Copy Markdown
Member

Description

Add animation on scroll in about-us page:
This uses scrollTrigger plugin of gsap for adding animation to about-us content.

Fixes

Fixes #[issue number] by @[issue author]

Types of changes

  • Bug/Hot fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring Old Code ( non-breaking change replacing already existing code )
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • I have read the CONTRIBUTING guidelines in repository.
  • My pull request has a descriptive title and is attached to an existing issue.
  • I haven't repeated the code and it follows established code style of repository.
  • My branch is up-to-date with upstream branch.
  • All new and existing tests passed.

@netlify

netlify Bot commented May 22, 2022

Copy link
Copy Markdown

Deploy Preview for cops ready!

Name Link
🔨 Latest commit ce9a415
🔍 Latest deploy log https://app.netlify.com/sites/cops/deploys/62ff1c0ee8a7ea00075a097d
😎 Deploy Preview https://deploy-preview-66--cops.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

This uses scrollTrigger plugin of gsap for adding
animation to about-us content.

Co-authored-by: Manan Rathi <76519771+Manan-Rathi@users.noreply.github.com>
Signed-off-by: Somesh Ranjan <somesh.ranjan.met20@itbhu.ac.in>
@king-11

king-11 commented Aug 16, 2022

Copy link
Copy Markdown
Member

@somesh202 updates on this

@king-11
king-11 requested a review from Manan-Rathi August 16, 2022 13:18
@king-11

king-11 commented Aug 18, 2022

Copy link
Copy Markdown
Member

do one more thing for this PR let's get rid of nuxt-gsap-module and everywhere, just directly use gsap the module has some typescript issue. navbar.vue would also need update. make a quick search for $gsap

@king-11

king-11 commented Aug 18, 2022

Copy link
Copy Markdown
Member

Just add gsap and remove nuxt-gsap-module from config

@king-11 king-11 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😅 force push removed the previous changes check once properly:

  • update nuxt.config.ts remove nuxt-gsap-module
  • update usage of $gsap everywhere

Ohh when i meant just ☠️ i meant finally do this as well and not to undo the changes.

Comment thread pages/aboutus/index.vue

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'
import { gsap } from 'gsap'

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

gsap isn't there in package.json

Comment thread package.json
"core-js": "^3.21.1",
"gsap": "^3.11.0",
"nuxt": "^2.15.8",
"nuxt-gsap-module": "^1.7.1",

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove nuxt-gsap-module

@Manan-Rathi

Manan-Rathi commented Aug 19, 2022

Copy link
Copy Markdown
Contributor

@king-11 Is the deploy preview of the About Us page the intended animation? The scroll trigger behavior seemed a little off🤔.

@king-11

king-11 commented Aug 19, 2022

Copy link
Copy Markdown
Member

The pinning might feel a bit off but yeah it's intended as done by @somesh202 . There is one issue though on mobile view the trailer and about us last card overlap

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants