Dave Dublin Posted September 7, 2022 Share Posted September 7, 2022 Hi If anyone can help I'd appreciate it. I am trying to achieve the effect of blocks overlapping as you scroll down but I am having trouble. I am not too knowledgable on the scrolltrigger code but I am trying to achieve a simpler version of what is on this site: https://weltio.com/about/ Also is there a callback function for when the scroll effect has initiated? I'd like to be able to add a fade effect to the previous slide. I've been looking through the documentation but having trouble finding a solution Thanks Dave See the Pen dyeYdRK by davedublin (@davedublin) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted September 7, 2022 Share Posted September 7, 2022 Hey there! Top tip for scrubbed animations like this is to put ScrollTrigger down. It sounds unintuitive but just back away from it for now. 😂 Start off by making the animation using GSAP. Have you got experience of tweens or timelines, where are you coming from knowledge-wise? Link to comment Share on other sites More sharing options...
Dave Dublin Posted September 7, 2022 Author Share Posted September 7, 2022 Thanks for the reply but I don't really have much experience at all with gsap. I just used scrolltrigger once before for a horizontal scroll and it worked ok. I saw a solution to a similar problem in the link below but I'm looking for the reverse of it. My experience is in JS and css normally. Link to comment Share on other sites More sharing options...
Cassie Posted September 7, 2022 Share Posted September 7, 2022 Ok, so ScrollTrigger is a GSAP product. It's just a way of controlling GSAP tweens and timelines using scroll Here's a very basic GSAP timeline (I've commented out the start and end panels for now so you can see what's happening) See the Pen YzLyjpm by GreenSock (@GreenSock) on CodePen Mess around with that until it looks right. If you want to change the position of the tweens (e.g. add a delay between them) then you can look at this article for guidance When you're happy you can hook it up to scroll using scrollTrigger. See the Pen GRdpBvp by GreenSock (@GreenSock) on CodePen I also recommend starting on GSAP basics first. Starting with ScrollTrigger is one of the most common learning speedbumps we see around here! 2 Link to comment Share on other sites More sharing options...
Dave Dublin Posted September 7, 2022 Author Share Posted September 7, 2022 Thanks for sending through. I was hoping for the animation to flow with the scroll of the page, not animating by itself. so if you scroll slowly down the page, the blocks will overlap slowly, or if you go the other way, they reverse. Just like this example, but imagine the browser being upside down: Link to comment Share on other sites More sharing options...
Cassie Posted September 7, 2022 Share Posted September 7, 2022 I understand that. I'm trying to explain to you how to approach something like this rather than just jumping to the end result. I was giving you a step by step walkthrough. First - create an animation, use a timeline, make use of the position parameter, set it up correctly in your CSS Second - hook it up to scroll, work out the best start and end positions, adjust scrub speed As I said - Quote I also recommend starting on GSAP basics first. Starting with ScrollTrigger is one of the most common learning speedbumps we see around here! ScrollTrigger doesn't exist in a vacuum. It controls GSAP animations. The best way to get results is by creating those animations first. 1 Link to comment Share on other sites More sharing options...
Dave Dublin Posted September 7, 2022 Author Share Posted September 7, 2022 ok gotcha. I'll give it a try Thanks D Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 7, 2022 Share Posted September 7, 2022 What I would do is first layout the cards on top of each other with CSS, this way they are already at their end position. Then you would need to calculate how far down they need to move on the page and make that the .from() tween with GSAP. That is indeed the exact opposite of the current demo, there the cards layout all underneath each other and got stacked with GSAP on top of each other. So to get the desired effect you will need to change the layout with CSS, create the animation with GSAP and when you're done hook it to ScrollTrigger. 48 minutes ago, Dave Dublin said: My experience is in JS and css normally. Maybe if I have some free time later I could take a look at it, but if you already have experience with JS and CSS, the hard part now is to lay it out correctly with CSS. Adding GSAP and ScrollTrigger will be easy when you've that figured out 1 Link to comment Share on other sites More sharing options...
Dave Dublin Posted September 7, 2022 Author Share Posted September 7, 2022 Thanks for the reply, I'll see how I get on D Link to comment Share on other sites More sharing options...
Dave Dublin Posted September 7, 2022 Author Share Posted September 7, 2022 Hey Cassie & mvaneijgen Thanks so much for the help. I worked through the timeline animation part and then added your scrolltrigger part, it's intuitive when you get into it Result below: Dave 2 Link to comment Share on other sites More sharing options...
Dave Dublin Posted September 7, 2022 Author Share Posted September 7, 2022 Sorry just one last thing. How do I slow it down? I added duration:0.2 to a timeline state but that didn't really do anything. It seems to go faster than the scroll. And is there a way to know which 'card' is active/animating? I'd like to add a class Thanks Dave Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 8, 2022 Share Posted September 8, 2022 Yeah that is hard to wrap your head around at first. GSAP animates a timeline over X amount of seconds, let's say 10, if you then hook it to ScrollTrigger it will animate that 10 seconds over (let say) a 1000px. If you want to increase the time it takes, you'll have to increase the `end:` value of your ScrollTrigger to a larger value, than it takes a longer scroll distance and will the original 10 seconds be stretched over the new scroll distance. 2 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