Jump to content
Search Community

Animations translate on scrolltrigger don't work

Andy777 test
Moderator Tag

Recommended Posts

hello there,

 

On my local development the animation works well but if i replicate it on my site it doesn't work here is the code: 

  .body{
                height: 100vh;
            }
            .myskillssection{
                width: 100%;
                height:100vh;
                background-color: black;
            }
            .box{
                border:1px solid red;
                overflow: hidden;
            }
            .box .text{
                color:aqua;
            }

  

        <div class="myskillssection">

            <div class="box">
                <div class="text">My text</div>
            </div>

        </div>
 gsap.set(".text",{ y: -25})
var tx = gsap.timeline({
  defaults: { duration: 100, ease: "none" },
  scrollTrigger: {
    trigger: ".myskillssection",
    scrub: true,
    start: "top top",
    end: "bottom top",
    pin:true,
    markers: true
  }
});

tx.to(".text", {y:0})

In my site it translateY to -25px default and when it is in viewport it  transform to translate3d(0px, -24.9795px, 0px) -24.etc instead of 0px, how i fix that issue?

Link to comment
Share on other sites

Hi there - there shouldn't be any differences between dev and prod.

Do you have any extra CSS being added on prod? I'm afraid it's very hard for us to help debug issues like this. 

What you'll need to do is play 'spot the difference' - what has changed in between your local setup and your production build? The issue won't be in the GSAP code, it'll likely be something else that has changed between local and prod affecting it, maybe some additional markup, some new CSS or conflicting JS.

 

Quote

In my site it translateY to -25px default and when it is in viewport it  transform to translate3d(0px, -24.9795px, 0px) -24.etc instead of 0px, how i fix that issue?

I don't understand this I'm afraid, maybe you could rephrase?

Good luck hunting it down!

Link to comment
Share on other sites

2 hours ago, elegantseagulls said:

I'd wonder if webflow is lazy loading images that are causing the page to move the start and end points, which is why I was asking what the start/end points look like in the markers

That's an excellent point. I would definitely recommend looking into that. 

 

Just for the purpose of troubleshooting, what happens if you add this?: 

// after 3 seconds, force a refresh
setTimeout(() => ScrollTrigger.refresh(), 3000);

I assume your site has fully loaded within 3 seconds - so let it load and then after 3 seconds, do things work? (after adding the above code)

 

If so, we know that you must have some kind of lazy loading going on or something else is shifting the layout in a way that messes up the measurements, so you'd need to figure out what that is and just call ScrollTrigger.refresh() once you know the DOM has settled. 

 

Like others have said, it's super difficult to troubleshoot without a minimal demo, so if there's any way you can provide one of those that shows the problem, you'll exponentially increase your odds of getting a good answer. 

  • Like 1
Link to comment
Share on other sites

i post to you the link to my port when you maybe find what's going on on inspect element tab css of element. @GreenSock you will see that on not in viewport of the tirdth section the text is translated(0px, -25px) and that's okay and when the third section in in viewport it impost to text IT translate3d(0px, -24.9795px, 0px) and not translate3d(0px, 0px, 0px) that's the problem.

 

Here my site :

https://andyrighetto.com

Link to comment
Share on other sites

Hi,

 

What duration exactly. I see three sections in the URL you provide and the third section is the only one that is not scrubbed by ScrollTrigger.

 

If you mean the third section then just set the duration to 2 in your GSAP instance's configuration object:

gsap.to(element, { duration: 2 });

If you're referring to the first two sections, scrubbed animations are not about time but about scrolling distance as @Cassie points in this video:

Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

6 hours ago, Andy777 said:

but now want the duration to during 2 second

You'll want to remove scrub: true, otherwise the timing will be dependent on how fast you are scrolling. You'll also want to set duration: 2, (in your example code above, you have the duration default set to 100 seconds, which is really quite long).

 

 

If you're looking to have it animate on every 'enter' check out the toggleAction controls: https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

 

 

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