ale269

Hi all, I'm new to using gsap so I apologize if the question I'm about to ask may seem trivial. I've searched the forum for something about it but can't find much. The problem is that every time I try to add a viewport entry animation for a section, if this is already in the viewport when accessing the site (for example it is the first section of the website), it will show for a flash for then after being animated. I guess the problem is because gsap is run after the page loads. I would like to avoid this effect though, is there a rigorous way to do this? Would it be possible to have a step-by-step explanation on how to set up the project so that the above effect doesn't happen? Thank you in advance for your support

Thanks, that was just what I was trying to do, the problem was related to how I was using perspective, applying it to the direct parent of the element it all seems to work fine. Thank you all very much for your help!

Thank you for replying!, surely the timeline is much more readable and I will use it in the future. maybe I expressed myself badly, the problem is not in the scroll trigger, the problem is that I can't create the animation I want and I don't understand why. I would simply like the element to start with a negative Y rotation angle (example -20deg ) and go towards a positive Y rotation angle (example 20deg). For some reason I don't get this result, the element starts to oscillate between angle 0deg and 20deg, or it seems to start from a positive deg, which I don't understand the value of, and get to 20deg. I can't understand the logic of the animation to get the desired effect. I hope I made myself clear, otherwise in the next answer I include an image of how I would like the animation to start and how I would like it to end.

hello and thanks for the reply, this is the link to the codepen example.I don't know exactly what you mean with the perspective problem, did I get the position of the property wrong within the line of code?However what I would like to obtain is a shift in the rotation on the axes, which starts with a negative angle (tilted clockwise) and performs a tilt counterclockwise during the scroll, which ends when the element leaves the viewport.I'm not sure if the code I wrote is the best to achieve this goal, I'm open to any clarification. Unfortunately I can't find any documentation to achieve what I'm looking for.Thanks in advance https://codepen.io/alemanfre26/pen/JjBOOGX

Hi all, I'm starting to use gsap now and I'm still trying to learn, I wanted to give a rotation effect on the x and y axes during scrolling. The problem is that by writing the line of code: gsap.fromTo(".element", {rotationY: "20deg", rotateX: "20deg", perspective: 500}, {scrollTrigger: {trigger: ".element", scrub: 1, start: "top bottom", end: "bottom top"}, rotationY: "-20deg", rotationX: "-20deg", perspective: 500, duration: 1}); the result is not the desired one, in fact the element seems to bounce and perform the animation in reverse. I tried to figure out the problem but couldn't find anything by searching, could you help me? I'm probably misspelling the values but I can't find any guidance on how to use RotateX and RotateY correctly