Jump to content
Search Community

ScrollTrigger jump to animation

NeroThroN test
Moderator Tag

Go to solution Solved by NeroThroN,

Recommended Posts

Hello world ! 

 

I'm pretty new inside the gsap environment.

 

I discover the plugin scrolltrigger few days ago and found an issue that i can't get around.

When I have multiple animations on the same element. One of this animation is based on scroll, if the page is already a little bit scrolled, when the scrolltrigger played, the animation jump to the progresss instead of animate to the progress.

 

What can I do to get around this problem and give a smooth experience to users, event those that didn't wait the end of appear animation ?

 

To reproduce this I have created a codepen.

  1. Before the end of the appear timeline, scroll a little bit on the content to see the top of the second section
  2. Now that the animation is finished, scroll a little bit inside the page using the scrollbar (just to trigger the scrolltrigger)
  3. Observe the content suddenly pop up above

 

Thanks all !

See the Pen zYEpJVV by nerothron (@nerothron) on CodePen

Link to comment
Share on other sites

  • Solution

Thanks @Cassie for your quick response

Quote

Wrap the content in a container div and animate that div on scroll instead of the same elements you're animating in the entrance animation

Something like this ? 

<div id="wrapper-title"><h1>Hello World!</h1></div>

Where in the appear animation I target "#wrapper-title" and in the scroll the "#wrapper-title > h1" ?

See the Pen qBPpLNv by nerothron (@nerothron) on CodePen

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...