Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Ak89

Mixnig a Parallax image sequence with some pinned animation

Go to solution Solved by OSUblake,

Recommended Posts

Hello.

I am trying to add a parallax image sequence to a pinned animation with ScrollTrigger. The Parallax section work fine as standalone code (this is a code I grabbed from another post on this forum). However, when I add it to the end of my animation, the parallax effect doesn't work. I suspect the positioning of the background images is the reason, but can't figure out what the solution is. Could you please take a look and advise?

 

Thanks,

Akbar

See the Pen WNEOEeO by Akbarbakhshi (@Akbarbakhshi) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Ak89, 

 

You're not creating your ScrollTriggers in order. I would suggest popping all your ScrollTrigger code inside your enableScrollTimeline function.

  • Like 4
Link to comment
Share on other sites

8 hours ago, OSUblake said:

Hi Ak89, 

 

You're not creating your ScrollTriggers in order. I would suggest popping all your ScrollTrigger code inside your enableScrollTimeline function.

Oh I see. Thank you! Problem solved. 

Link to comment
Share on other sites

16 hours ago, OSUblake said:

Hi Ak89, 

 

You're not creating your ScrollTriggers in order. I would suggest popping all your ScrollTrigger code inside your enableScrollTimeline function.

Hi again.

One more thing. I have all the scrollTrigger stuff inside the enableScrollTimeline function which is supposed to trigger after the first animation is completed, but if you start scrolling quickly when the page loads, the scrolling works while the animation is playing and it messes the whole thing up. How do I disable the scroll at the beginning until the initial animation is over?

Link to comment
Share on other sites

If you are talking about disabling scrolling, most people set overflow: hidden on the body, and then you can remove that when your animation is done.

Link to comment
Share on other sites

Right... but the whole point of onComplete: enableScrollTimeline in my timeline is to postpone other triggers until the current timeline is complete. I was able to fix the problem. I set the display of the sections to none  and then set it to block inside the enableScrollTimeline function.

 

Thanks for the tip anyways. I'll keep that in mind.

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.
×