Jump to content
GreenSock

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

scrolltrigger lag

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

Thanks I appreciate it a lot!,

 

However, I'll make a demo on codepen but with scrollTrigger what's the best way to do the animations triggered with a timeline and then continue in parallax on one element?

 

Thanks for the replies!

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

Hi,

I've make a demo on codepen!

 

See the Pen WNjYKpb by alessio-paoletti (@alessio-paoletti) on CodePen

 

this is a try,
I have used css animations for the reveal animations but then i want to translate the image down as parallax transition like your first demo, but in my case with the reveal effects the parallax animation lagging.

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