uavide

Good morning, i add this code in the code elements of a wordpress builder and it works:So i get the gsap library from cdn link and i add a simple gsap animation to an image with a specific class. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> <script> gsap.to(".lago2", {duration: 2, x: 200, ease: "bounce"}); </script> <style> .lago2 { width:180px; } </style> <img class="lago2" src="/wp-content/uploads/2022/07/logo.jpg" alt="" width="180" height="180" /> i discovered that it’s better to add the js libraries (gsap) with enqueue in function.php of wordpressSo i tried to add to the function.php this code: function wpb_adding_scripts(){ wp_register_script( 'gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js', array(), '1.0', true ); wp_enqueue_script('gsap'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); and i remove from the code elements in the builder the script src about the cdn link.So my code in the code element in the builder (in wordpress) it’s like this: <script> gsap.to(".lago2", {duration: 2, x: 200, ease: "bounce"}); </script> <style> .lago2 { width:180px; } </style> <img class="lago2" src="/wp-content/uploads/2022/07/logo.jpg" alt="" width="180" height="180" /> But it doesn't work...so i thought that maybe my enqueue code in function.php it's wrong. What do you think? could you help me to understand? Many thanks Davide

Thanks to everybody...Have a nice day

Good morning, someone could help me to find a gsap tutorial or code that i have to add to an image, to have an effect like this that you can see from the main slide of this site when you scroll the page? https://wordpress-636524-2492319.cloudwaysapps.com/moheim/ So the image it seems to come close to you when you scroll the page, this is the effect that i would like to know how to make it with scroller trigger. Many Thanks

Good morning, from this codepen: https://codepen.io/cameronknight/pen/abOVoXb , i made mine:https://codepen.io/uavide/pen/qBxYmPE My question is that instead of images, and html command <img src = ""> I would like to use id which contain a background image, (as you can see in my example codepen.) The reveal image works, but I would like to understand how do I get the effects of gsap. I think that I should modify this piece of code: let revealCallback = (entries, self) => { entries.forEach((entry) => { let container = entry.target; let img = entry.target.querySelector("img"); maybe this: if (entry.isIntersecting) { revealAnim.set(container, { visibility: "visible" this: r evealAnim.from(img, 4, { scale: 1.4, ease: easeInOut, delay: -1 }); self.unobserve(entry.target); } I don't know how to change it, could you help me please? Thanks Davide

Ok that's cool thanks ..have a nice day!!!

Good morning, I found this codepen: https://codepen.io/icodeayush/pen/vYgdBVr and tried to make mine codepen for my needs here: https://codepen.io/uavide/pen/ZErJmJm I would like to understand how I can make the image you see in the codepen become a full screen image (as if it were the background image), and when i scroll that start to zoom out from the center. Thanks. Davide

Many thanks for your answer, but i think that i finally found something that it looks ok in my case. Now the scroller it goes faster and for me it's ok. i just add this: - innerWidth Before: end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth Now: end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth - innerWidth https://taxiboat.salone24.it/nuovo/ Thanks Davide

Hello I found this animation and I was wondering if there is the possibility to switch from one slide to the next with only one scroll (one time), now I have to scroll several times to go to the next one. In this page i add some background image and for go to one slide to the next one it tooks many scrolls: https://taxiboat.salone24.it/nuovo/ As if with a single scroll it goes directly to the next slide, as if they overlap one on top of the other. Thanks Davide

Thanks to everybody...i will search the way to fix the issues with browser. Have a nice day!

Thanks, For put the text "Beautiful Locations" to the center, i tried to use these parameters text-anchor:middle; dominant-baseline:central; alignment-baseline:middle; So in codepen here: https://codepen.io/uavide/pen/jOYopVL i add to .svg-text class these parameters and it works. text-anchor: middle; dominant-baseline: middle; With firefox i tried with all three parameters, to put one, remove another, put them together etc..but the text is always loaded at the first refresh of the browser on the right, then if I do another refresh of the firefox browser, the text goes to the center (as I would like it to be). This is a weird behavior that I can't figure out how to fix. Here the link of the page if you try to open it with firefox: https://taxiboat.salone24.it/closemask_gsap_ok/ As far as concerns the problem (always on firefox) of adding white space under the animation when I scroll down the browser and suddenly, while I scroll, the page jumps and goes back to the animation and at that point the animation starts with the scrollertrigger. On Chrome it works. In this link there is the video of the page on Chrome (before) and on Firefox (after). This way you can understand what I mean. https://taxiboat.salone24.it/bug_firefox/ On Codepen it works, so I can't report the problem, because I don't know what the problem itm could be with firefox. I hope you can help me understand why firefox gives me this problem. Maybe it's the animation pin? i tried to make some changing, to anticipatepin etc..but without result. Many Thanks David

Hi to everyone..first of all I would like to thank you for helping me, it is one of the best forums I have ever seen...in addition to helping, it also encourages you to learn. So I started to take a look at how Gsap works and I was able to make my first animation...? Now the text "Beautiful Locations" exits the screen as the mask closes by scrolling. Here codepen: https://codepen.io/uavide/pen/jOYopVL Thanks @akapowl for the example on codepen you gave me to work on. Really appreciate it. I wanted to ask how I can center the text "Beautiful Locations", because as you can see it is shifted to the right. Then I noticed, once I imported the animation (in wordpress with Divi Builder), that on the Firefox browser, when I scroll down the page, and I get to my animation, it doesn't stop directly on my background with the animation, but it scroll down a bit on the page of the site and suddenly it goes back to the background where the scroll starts the animation. This doesn't happen on Chrome. Why do you think this happens? here is the link that allows you to better understand what I mean: https://taxiboat.salone24.it/closemask_gsap_ok/ Many thanks to everyone Davide

Thank you very much for you support, finally i think that this animation should be a start point for build what i would like to have. Here: https://codepen.io/uavide/pen/jOYopVL Premised that I am a beginner, I would like to ask you kindly if it is possible to make these changes and additions on this model: 1 - How can I have the text (Beautiful Place) under the mask when closing? as you can see now when closing the mask the text stays over the mask 2 - How can I make the mask above the background close completely, because now the circle mask does not close completely above the backgroun image. 3 - After the mask has closed completely above the background image, how can I make an image or module appear over the mask? (on my site I should display an image slide module ... so it would be enough for me to just have animation in blur or entry from below of a div with id or class that I would then assign to my module). I hope that you can you help me. Thanks a lot again. Davide

Thanks, of course I understand what you mean and I agree ... but this code is intersected with Divi builder that runs under wordpress and for my standards as a developer it becomes too complex a thing. So I ask you if there is a tutorial or an example of a circular mask that closes over a background image when scrolled. Because I've only seen examples of a mask that opens over a background image. un example like this: https://taxiboat.salone24.it/throttle-originale/ Thanks Davide

Thanks for your answer. I understand what you mean but i'm not able to extrapolate just the html that i need without all the connections with the page on wp and Divi Builder. So maybe it will be easier to ask if you know and you can indicate an animation like the one that i shows (so circle mask that on scroll it cover completely the background and after that a module it appears. Thanks Davide

Thanks for your answer, here are the right link like examples: Here the original: https://taxiboat.salone24.it/throttle-originale/ Here how I would like it: https://taxiboat.salone24.it/throttle-mio/ I add html from my page to the codepen..now it works..here: https://codepen.io/uavide/pen/eYyXPYR Thanks Davide

Good morning, I'm building a site with Wordpress and the Divi Builder. I have this animation in GSAP that I would like to edit. Here the original: https: //taxiboat.salone24.it/throttle-originale/ Here how I would like it: https: //taxiboat.salone24.it/throttle-mio/ The css and js files are visible at the codepen link. What I would like to have is that when I scroll the page, the white circle that masks the image, it closes completely (while now it remains a little open), and only after the circle has closed completely and has hidden the background image, only now, my module appears (the one visible in the second link / throttle-mio /). (The slide with the big image) Could you help me understand how I can do it? Many thanks Davide