_youri

Here is the code with no scrolltrigger and images from lorelpixem.com https://codepen.io/_youri/pen/qBNLxom To be honest I don't understand very well what's happen. I just see that images don't go full screen when clicked.

Hi Zach, here is a new Pen with minimum code. https://codepen.io/_youri/pen/qBNLxom

Hi ! I'd like to add to each image a nice fullscreen zoom effect but I can't succeed to implement the code in the 2nd Pen... Can someone help me please ? https://codepen.io/_youri/pen/zYByNpR https://codepen.io/0skar/pen/MyoWrb

I've got the answer, I've forgotten to import all libraries in the 2nd file, sorry ! I thought it wasn't compulsory when I didn't need them.

Hi all ! Right now I need 2 scripts in the same js file : First one called in my index.php file /////NAVIGATION////////////////////////////////////////////////// Draggable.create(".vignettes", { bounds:".h-content", allowNativeTouchScrolling:false, type:"x", throwProps: true } ) gsap.set("body", {overflowY:'scroll'}); var scrollSpeed = 0.5; // half of user scroll var scrollHeight = 10000; gsap.set("body", {height:scrollHeight, overflowY:'scroll'}); $(document).on("scroll", function (){ const pixels = $(document).scrollTop(); gsap.to('.vignettes',1,{x:-0.5 * pixels}) //'0.5' = half speed of user scroll console.log(pixels); }) Second one called in my apropos.php file /////A PROPOS SPLITTEXT//////////////////////////////////////////////// var tl = gsap.timeline(), mySplitText = new SplitText("#quote", {type:"words,chars"}), chars = mySplitText.chars; //an array of all the divs that wrap each character gsap.set("#quote", {perspective: 400}); tl.from(chars, {duration: 8.8, opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:"back", stagger: 0.01}, "+=0"); console.log(mySplitText.version); The first one seems to disturb the second one. I don't understand why ...

Yes, that's exactly the problem I couldn't solve yesterday and today ! Now It works nicely and properly ! Thank you for your help akapowl, and to be so reactive.

Ok, it works better now, but If I scroll fast, down page, my divs take a little time to appear... I guess there is a timing problem, when I'm in Full Page View on the Pen, scrollTrigger runs but my page stay empty...

Thank you for this advice, I've just loaded those ones : https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

Ok. I'm sorry, I've fixed it !

Hi, For my website I'm trying to use the code from snorkl.tv in order to have a smooth scroll : https://www.snorkl.tv/scrolltrigger-smooth-scroll/ I've created the div with a class="scrollContainer" and used the proxy method but I'm stucked. Because my timeline is broken. Here is a Pen of my code. https://codepen.io/_youri/pen/LYZxZPW Where am I wrong ? You should open the pen in a new window as my div have width bigger that the display in Pen !

Ok, I've understood, fine ! Thank you for the fix and quick response!

Thanks a lot, it works almost perfectly. I use gsap 3.3.3. I've got the feeling that this tilt 3d only works on two sides of my image : left and top. Have a look... http://piecesdetheatre.free.fr/tests/GSAP/testsite2_GSAP.html

Hi, I've found this Pen on the forum. And I wonder how to modify the code to flip the image "only" when pointer is over the image ? Actually I'd like to apply this flip effect on 2 images independently. I mean eachone can be flipped. https://codepen.io/emanuelbaran/pen/PPOdmw Thank you !

Yes Zach, I will read your code step by step. I'm not very familiar with Loop, but I'll try to figure it out. I made a new animation ! https://codepen.io/_youri/pen/XWKdGMq

Ok I explain myself, each time I scroll I want to see the image and the text corresponding (same line) displayed at the same time. The more I scroll, and the more I see image+text gathered in the center of the screen. I hope you see what I've got in mind ? And between each group (image+text) they might be an .empty div of 400px height to separate each line. Here .boxleft2 translate after .boxright2 .. Am I clear ?