Jump to content
GreenSock

AkhilRaja

Timeline and ScrollTrigger target same element

Go to solution Solved by OSUblake,

Recommended Posts

I want to scroll trigger animation on the same element which has a gsap timeline animation running. In my code pen i have two elements ".H1" and ".SpinWrap h1".

I want to spin ".H1" while gsap timeline is running, i want to do it in a way that gsap timelines and scroll trigger remember my scroll change value and get updated and keep playing when im not scrolling.

If you look at ".SpinWrap h1" i can achieve the result by doing this hack of creating a wrap and target ".SpinWrap" and ".SpinWrap h1" by this way both gsap timeline and scroll trigger keep playing the way i want but i want to know is there any way that i can get the same result without creating wrap or targeting the same element.

See the Pen ExomOOM by AkhilRaja (@AkhilRaja) on CodePen

Link to comment
Share on other sites

Another approach would be to change the timeScale on the animation.

 

See the Pen xxprOvo by GreenSock (@GreenSock) on CodePen

 

Link to comment
Share on other sites

Its not working the way i want, i wanted to achieve this, that when Timeline is playing and then i use Scrolltrigger, both are targeting the same element ".H1" rotate: property and changing its value. If you look at my Codepen i achieved this by creating ".SpinWrap h1" timeline is targeting ".SpinWrap" and scrolltrigger ".SpinWrap h1".

I want the same effect you see on the right side ".SpinWrap h1" when you scroll its spin while timeline is playing. I created ".SpinWrap h1" just to show you what result i want to achieve by only targeting ".H1". I hope you now understand what im trying to explain.

Link to comment
Share on other sites

See the Pen mdpwMLM by AkhilRaja (@AkhilRaja) on CodePen



here i remove the background color so you can see my hack is working on the right side ".SpinWrap h1" element when we scroll.

Link to comment
Share on other sites

I understand the problem, and the solution I gave works, but you may have to play with the numbers. Or you can you use a wrapper element like in your demo.

 

Link to comment
Share on other sites

On 3/30/2022 at 2:36 PM, OSUblake said:

I understand the problem, and the solution I gave works, but you may have to play with the numbers. Or you can you use a wrapper element like in your demo.

 

its not working for what im trying to achieve, look at my code and see scroll trigger working after 10 sec and in your code after 10 sec scroll trigger dont work.

I can use Wrapper hack to make it work, i created this tread so i can learn something new like maybe there is a way in GSAP that i can target the same element and timeline and scrolltrigger can work together and update each other about property changes.

Link to comment
Share on other sites

  • Solution

I wouldn't call it a hack. It's what need to make it work. You can't have two simultaneous animation running on the same element that target the same properties. It's creating a conflict. It's very similar to this question, where they were creating conflicting opacity animations.

 

 

  • Like 1
  • Thanks 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.
×