krs

Wow Jack thank you so much this is it! The logic you worked out here, looking at the code is impressive ?. I don't think I would've been able to figure this one out without your help!!! I also love how you merged the two timelines into one and added the if statement in the tween level! Thank you for being so generous ❤️ ?

Hi Jack, I didn't mean to go rogue from your example I was going to clean some of that stuff up to align to your code, I apologize for posting the pen above while I hadn't cleaned it up. What I realized was that your code did what I needed with the only exception that when the taller sections scale back their content needs to be contained in a panel of the same height. So I think it's inevitable to not have to deal with the funky nested scroll stuff. So I took some of the logic Cassie provided and tried to create something similar. https://codepen.io/riginosk/pen/e8390293ba7d1cbaff61f3b50c0e8088?editors=1010 To answer some of your questions 1. My mistake, I wasn't aware I had to provide an end value to endTrigger. 2. The pinSpacing seemed like the only way to allow me to first virtually scroll the content within the panel and then scale it. Without it slide 3 comes into view too soon. But again I'm not sure if there is another way of doing that. 3. I'm not super familiar with GSAP 3 syntax, noob here 4. I wanted to do some other stuff and was using labels to start some tween at the same time (removed it) 5. Thats just bad code on my end except for the rotate that i thought I read somewhere that it improves performance. Here are some images to try and illustrate: Your demo is super close but the content needs to contained inside the panel So looking to achieve something like this where all the panels have the same ratio Thank you very much for your time and help!!

Hi Greenshock Team, again thank you for your help yesterday. I managed to merge some of the logic from the examples above and I have come pretty close to the desired result but where I'm stuck is when adding pinSpacing: True. I cannot figure out why the slide 3 is delayed to come into view. Here is a codepen, hopefully that illustrates the issue a bit better. https://codepen.io/riginosk/pen/e8390293ba7d1cbaff61f3b50c0e8088

Thank you soooo much both of you for all the help! This is exactly what I was looking for. ❤️

Thank you so much Cassie for looking into it! It is indeed very tricky.

Hello Greenshock forums! I love all of your products and want to thank you for creating and maintaining them. I don't normally post for help unless I've exhausted my options and would appreciate if anyone can help or even give me some pointers. I am trying to achieve this functionality where I have an x number of sections that the user scroll through. Most sections are 100vh like presentation slides but some are going to be longer in height. As the user scrolls the sections pin themselves and animate which works pretty well so far. However when the sections are longer I need them to pin for longer and scroll until the content inside them scrolls to the end. Because one codepen is equal to 1000 words here is what i am trying to achieve: https://codepen.io/riginosk/pen/291e78b4557bcf4a022d094ffea85163 Thank you!

Hi @Dipscom Thank you for your fast reply this is very helpful. I was wondering how would you go by animating all the divs when one is clicked. here is an example of what im trying to achive in codepen with pure css:

I am trying to create a series of divs where each div is clickable and animates the rest. So for example: I have 4 divs. The first div has a class, ".active" that gives it a fixed:position and is centered to the viewport. .active{ position:fixed; } <div id="slide1" class="active"></div> <div id="slide2"></div> <div id="slide3"></div> <div id="slide4"></div> If I click on #slide2 then: #slide2 becomes active and tweens to #slide1 position aka the center of the viewport. #slide1 tweens to a new position. #slide3 tweens to a new position. #slide4 tweens to a new position. Respectively the same would happen if I clicked on #slide3: #slide3 becomes active and tweens to #slide1 position aka the center of the viewport. #slide1 tweens to a new position. #slide2 tweens to a new position. #slide4 tweens to a new position. When I click #slide2 the div(#slide2) tweens to the active position(center of viewport) and #slide1 to a new position as it should. Then i click #slide1, and #slide2 tweens back to its original position and #slide1 becomes active. So far so good. However when I click #slide2 again nothing happens. I am aware that the problem is that with each click I add another timeline to the previous timeline but not quite sure how to fix that. have set up a pen that hopefully better explains what I am trying to achieve. anim.3gp