Jump to content
Search Community

Horizontal tween bgs bug

Dennyno test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

I don't have much time to dig into this but from a quick glance...

  1. You're likely creating a bunch of overlapping/conflicting tweens because you're trying to animate the exact same property of the same object every time you enter or leave a section. So imagine when you go from a red section to an orange section...you leave the red AND enter the orange at the same time, thus it's trying to animate to red AND orange simultaneously. That's a logic issue in your code. You've gotta choose one or the other. My guess is you only need it to happen onEnter and onEnterBack.
  2. I'd recommend setting overwrite: true or "auto" on your tweens to prevent conflicts.
  3. With the helper function that's doing the smooth scrolling, you can't have the sub-ScrollTriggers also have a scrubbed value other than true due to order-of-operation challenges with the current version. Watch for the next release for some exciting news. ;)

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

  • Like 1
Link to comment
Share on other sites

Thanks!
Works like a charm on desktop, and nice to hear about the next update!

On mobile seems cutting the sections' right edge, or it's me?

Also 1 thing: how to enable the bg tween also for the first section?

Works for all except the first one, which actually comes suddenly from the blue one
 

Link to comment
Share on other sites

  • Solution
16 hours ago, Dennyno said:

On mobile seems cutting the sections' right edge, or it's me?

I don't understand what you mean - it looks correct to me but I'm not sure what I'm looking for. 

 

16 hours ago, Dennyno said:

Also 1 thing: how to enable the bg tween also for the first section?

That's because by default the start is at "left left" and the first section is already there when the page loads, thus it fires. You could change it to start: "1px left" so that it needs another pixel to move first. I've updated my CodePen accordingly. 

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