Jump to content
GreenSock

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

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

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

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×