alessiopaoletti Posted August 7, 2021 Share Posted August 7, 2021 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 More sharing options...
GreenSock Posted August 7, 2021 Share Posted August 7, 2021 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. 1 Link to comment Share on other sites More sharing options...
DLong Posted August 7, 2021 Share Posted August 7, 2021 that site looks great, Link to comment Share on other sites More sharing options...
alessiopaoletti Posted August 8, 2021 Author Share Posted August 8, 2021 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 More sharing options...
GreenSock Posted August 8, 2021 Share Posted August 8, 2021 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: See the Pen RwVGNea by GreenSock (@GreenSock) on CodePen See the Pen vYNNvMj by GreenSock (@GreenSock) on CodePen See the Pen abdyPBw by isladjan (@isladjan) on CodePen See the Pen ZEbgGOp by creativeocean (@creativeocean) on CodePen And there's a whole listing of demos at https://greensock.com/st-demos Link to comment Share on other sites More sharing options...
alessiopaoletti Posted August 8, 2021 Author Share Posted August 8, 2021 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 More sharing options...
GreenSock Posted August 9, 2021 Share Posted August 9, 2021 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! 3 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now