Jump to content
Search Community

scrolltrigger lag

alessiopaoletti test
Moderator Tag

Recommended Posts

Hi!

 

I have an animation and I have used scrolltrigger for add class to the container and then animate the elements with css, but I wont that the image translate down as parallax animation.

 

but the parallax animation lag a lot but not the value in the ispector window, the is only on the page and there isn't a drop of frames.

 

and if i remove the add class part animations the parallax effect is smooth.

 

why?? and how can i solve?

 

Link to the site

Link to comment
Share on other sites

If you'd like some help, please provide a minimal demo (like in CodePen or something). It's just too hard to troubleshoot a live site that's not editable and has lots of other factors at play. 

 

I also wonder why you're using CSS animations instead of GSAP. Be very careful about using CSS transitions on elements that you're also animating with GSAP - that won't go well. 

 

We'd be happy to take a peek at a minimal demo

  • Like 1
Link to comment
Share on other sites

1 hour ago, alessiopaoletti said:

what's the best way to do the animations triggered with a timeline and then continue in parallax on one element?

Sorry, I don't understand your question. 

 

Here are some parallax demos:

And there's a whole listing of demos at https://greensock.com/st-demos

Link to comment
Share on other sites

Yeah, that looks like CSS issues to me. Look at the <img> in Dev Tools - you'll notice that GSAP is doing exactly what you asked (translateY). However, you have both CSS transitions and CSS animations applied to a few things which are likely causing the problems. And you're toggling a class which, again, is likely causing logic problems with the way you're implementing it. 

 

Here's what I'd suggest:

  • Don't use CSS transitions or animations. Use GSAP. It solves a lot of browser issues and will give you MUCH more flexibility. 
  • Always set your transforms via GSAP (not just CSS). See
  • You can shorten your transform code by using the aliases:
    // long: 
    translateY: "200px"
    
    // short:
    y: 200
  • I wonder if you meant to use a negative translateY so that it accelerates in the direction of the scroll. Currently you've got it going against the scroll. 

Good luck!

  • Like 3
  • Thanks 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...