matruck

Thank you !! And also for pointing out the overcomplicated code !

Hello and thank you for your amazing work I have to animate an element with scrollTriggers. The entrance animation (when the element enters the viewport from the bottom) is not scrubbed, but the leaving animation (when the element leaves the viewport by the top) is scrubbed. On the demo I provided, you can see that the red square is visible at the beginning, but I want it to be at opacity = 0. Once you scroll to the starting point and go back, the square successfully disappear and everything is as I want it to be even if you scroll up and down. Why is it visible at the begining and how to fix it ? Thank you

Hello, First of all, thanks a lot to the gsap team for all the work and support you provide everyday, it's amazing and really bring the product to another level https://codepen.io/NinjaKinshasa/pen/QWVBejZ I have an horizontal scroll with sections and scrubbed timelines on every section. Each timeline moves a cube. My issue is that the cube "jumps" the first time scrolling over the third section. I want it to have its shifted position since the begining before the first scroll pass. How can I do this ? Thank you ! Enregistrement de l’écran 2023-03-19 à 16.32.54.mov

Thank you Rodrigo for your reply ! There are still some issues : in your example the scroll stops at card 7 while there are 8 blocs (in the codepen preview), and there is a "dead scroll zone" at the end where nothing happens. I want the scroll to fit perfectly with the #carousel regardless of the size of the viewport ? It fits with markers = true so I guess it is doable without having to change the css at all.

I have the same issue here https://codepen.io/NinjaKinshasa/pen/JjaZdqg It only works when "markers: true" is uncommented. Do you know what can cause this ?

Thank you very much for your reply ! The codepen and the videos are very useful, now I understand the flip technique !

Hello everyone, I'm new to gsap and I'm trying to reproduce an effect seen on https://bepatrickdavid.com/ , in the "selected works" section. When you click on an image, for exemple, next to 'miranda biondi', you can see the animation. In my codepen, I successfully reproduced the effect, but I am not satisfied with the code. I am certain that it is possible to use a more "gsap way" of coding. The 2 things i'm unhappy with are : 1. To make the switch of static/fixed image, I had to get the position of the element with getBoundingClientRect, wich i think is not a good gsap solution. 2. I don't understand exactly why, but once an image has been opened and closed, its size is fixed (you have to resize the width of the viewport to understand : the other images scale, but not the ones that have been animated once). I want to use gsap to help me coding animations I understand at low level, for this reason I don't want to use the Flip module in this specific case. Given this effect and my codepen, what is the clean gsap way of doing this animation ? Thank you ! (Also, what if the container of the image has a visible style (like background-color or border-color), and I want to make it disappear without hiding the selected image too ? My solution here avoids this problem by not having any style on containers, like it seems to be on patrickdavid's website)