Jump to content
Search Community

How to stop different layers from animating when one reaches the end?

qarlo test
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

sorry if the title is not really clear.

 

I'm trying to create a horizontal parallax animation with at least three layers. The end result should also be responsive, so I can't really use fixed numbers. Also, the image for the background is not the same size as the others.

 

Let's say that the background is 8000px and the image on top is only 5000px. I want the scrolling to stop when the right border of the second image reaches the outer margin of the browser window. I kind of did it, but not quite right.

 

In the pen I created, as you can see, after the character layer reaches its end, the background still goes on for a little while. Is there a way to avoid this? Or a better approach to the whole thing?

See the Pen pbgBoa by anon (@anon) on CodePen

Link to comment
Share on other sites

An update:

searching for more example and a bit more through the documentation I figured out that I could use the onComplete callback to stop or pause the timeline when the front tween reaches its end. I updated the pen accordingly:

See the Pen aZNvgQ by anon (@anon) on CodePen

 

Still is not working as I'm expecting. What am I missing?

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,

 

Assuming that you properly calculate how far the foreground image can move (so that its right edge never becomes less than the right edge of the viewport) you just want to move the background less distance in the same amount of time (slower).

 

If both tweens have the same duration then the background won't be able to keep moving when the foreground reaches it limit.

 

Sort of like:

 

tl.add([
    TweenMax.to(".back", 12, {
      x: -(distance - 300)
    }),
    TweenMax.to(".middle", 12, {
      x: -distance
    })

http://codepen.io/GreenSock/pen/RRaGJo?editors=0010

 

Is that what you need?

 

As far as making it totally responsive and dynamic for all viewport sizes and aspect ratios, that's a bit beyond what I can support. We really try to stay laser focused on the GSAP API.

  • Like 2
Link to comment
Share on other sites

 

tl.add([
    TweenMax.to(".back", 12, {
      x: -(distance - 300)
    }),
    TweenMax.to(".middle", 12, {
      x: -distance
    })

See the Pen RRaGJo?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you need?

 

Yes, actually this makes perfect sense and is way more simpler than what I was thinking, thanks!

 

 

As far as making it totally responsive and dynamic for all viewport sizes and aspect ratios, that's a bit beyond what I can support. We really try to stay laser focused on the GSAP API.

 

Of course, but what I was still referring to GSAP, in a way. I mean, I know how to make the images responsive and to adapt them to the window. I'm still not sure about the best way to make the duration of gsap controlled animations responsive.

For example: when I open the page, the script calculates the width of the images and so the duration of the animation is set. If I then reduce the window size, how can I update the values?

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