hanjames

Thanks a lot @mvaneijgen actually just solved it a couple hours ago, and I have quite the same approach as you here, the only thing now is to refactor it so it can be used for dynamic data, but it's for later work atleast I have done the basic concept here, thanks once again much appreciated your help Here's the latest version: Codepen

Thanks @mvaneijgen. Do you mind to check out my latest update on the codepen? what if the scenario is like that where there's a scale that needs to be animated back and forth depends on whether the card is in the center or not?

Hey @mvaneijgen thanks for the reply, sorry for the late reply. I've been experimenting for couple of times, and this is the closest one I've got. I just need this to be in sync instead of staggered like this. Here's the codepen demo: Codepen Demo

Hi every gsap hero In this case, I want to achieve a carousel-like animation on scroll with couple of card item, so instead of waiting another card item to finish sliding up I want all card items are sliding together with some effect e.g. if the card-item is not on the center it should fade out and scale down. I've tried some couple methods like using position parameter but haven't found the working solution yet, I provide the codepen here with the white rectangle as the card-item carousel center

@mvaneijgen Yes, I've already tried it out before, it's okay I just need to grasp the concept a little bit more. Here's the snippet : https://codepen.io/ryanfarhan00/pen/zYyJeVL

Hi there, I want to animate each text of an array sequentially e.g. the first index should animate fade-in and then fade-out, continue to the next index and repeat the same animation, if it reached the end of array it will repeat the timeline, basically a looping animation. At the same time I want to make the container animate its width based on the text inside, while animating the parent so it seems like smoothly slide to center no matter how long the animated text is. Here I provide an example from this website https://www.cosmos.so/ in the hero section there's a paragraph "A pinterest alternative for [animated text]" This is the codepen of the element structure that I found on their website, it might give some additional context.

@Rodrigo Thanks, rodrigo. It works now!. For me it's the setState method that works inside .add() method, I assume that's because the cleanup process that performed by gsap.context() when I scroll back up. Need some time to grasp the concept though hahaha, but it was a fun challenge nonetheless.

Thank you so much!, I tweaked it a little bit by removing the image-src child in the image-main and now it's working pretty close. Only one issue though, when I apply mainImage.appendChild(mainImageSrc) then I scroll back everything just goes black, it seems like tween can't run backwards after the flip animation done.

Hi there, so I want to make a scroll animation of an image that has full width and full height of its parent section, and scale it down back to its original position in a column, I found some possible solution by using a Flip plugin but still don't know how to implement it yet, also I want to perform some intermediary animation like the text reveal sequentially before it can continue to animate back to its column. For now I provided some rough codepen example by using another div directly below the section element and the final position of the image should be in the middle of the 2nd column.