_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 ?

Well, for animating 2 lines, with both divs on scrolling, I've created a new Pen but it seems very clumsy !!! It looks catastrophic https://codepen.io/_youri/pen/ExyPJVx

For the timeline I have to use addLabel, in order to trigger both animation at the same time ?

I've tried a Pen : https://codepen.io/_youri/pen/wvWMYbG If this is ok, I will need to trigger it while scrolling.

Hi ! I don't understand why my code works ? I thought my right div should be pushed to the center with a positive value instead of x: -1200, like with css positioning ? Also, is it possible to make this stuff responsive ? Always have those 2 divs centered, side by side, in the middle of my page ? thank you for your help. <!DOCTYPE html> <html> <head> <style type="text/css"> body { height:3000px; } .boxleft { background:url("404.svg"); width:400px; height:400px; position:absolute; top:1500px; left:-400px; } .boxright{ width:400px; height:400px; position:absolute; top:1500px; right:-400px; } </style> </head> <body> <div class="boxleft"></div> <div class="boxright">Stack Overflow est un site web proposant des questions et réponses sur un large choix de thèmes concernant la programmation informatique. </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js'></script> <script> gsap.registerPlugin(ScrollTrigger); gsap.to(".boxleft", { scrollTrigger: { trigger: ".boxleft", start: "top center", end: "center 400px", scrub: 1, markers: "true", toggleActions: "restart pause reverse none" }, x: 800, duration:3 }); gsap.to(".boxright", { scrollTrigger: { trigger: ".boxright", start: "top center", end: "center 400px", scrub: 1, markers: "true", toggleActions: "restart pause reverse none" }, x: -1200, duration:3 }); </script> </body> </html>

Hi , I would like to know if GreenSock is able to make a "wave effect" on images as it's done on the background of those websites, when scrolling ? https://experiments.p5aholic.me/ https://www.tplh.net/works/warpdrive/ thank you,