Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

somesh202
Copy link
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
Copy link

netlify bot commented May 22, 2022

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 <[email protected]>
Signed-off-by: Somesh Ranjan <[email protected]>
@king-11
Copy link
Member

king-11 commented Aug 16, 2022

@somesh202 updates on this

@king-11
Copy link
Member

king-11 commented Aug 18, 2022

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
Copy link
Member

king-11 commented Aug 18, 2022

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

Copy link
Member

@king-11 king-11 left a comment

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.

@@ -66,14 +66,14 @@

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'
import { gsap } from 'gsap'
Copy link
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

"nuxt": "^2.15.8",
"nuxt-gsap-module": "^1.7.1",
Copy link
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
Copy link
Contributor

Manan-Rathi commented Aug 19, 2022

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

@king-11
Copy link
Member

king-11 commented Aug 19, 2022

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