uavide

Hello everyone, someone knows a easy example on codepen that shows how to make an svg mask in front and an image behind and when i scroll the svg start to zoom untill it disappear and i can see the image behind. Many thanks

Ooohhh.you are rigth...i forgot Many thanks

Good Morning, this codepen that i'm tryng to make it work it, it doesn't scroll and it start alone the animation. I get this demo from here: https://github.com/codrops/OnScrollColumnsRows/tree/main demo: https://tympanus.net/Development/OnScrollColumnsRows/ I'm try to replicate the number 2 I don't understand how to fix it...what do you thing? could you help me? many thanks

yes of course..you are right!...thanks for your help

yes..supercool!!!... just one thing...instead of Id gallery How i can use class . gallery? it will be possibile? Many thanks

Hi everyone, it is possible to make something like this with gsap? Thanks

wow!!! thanks..it works really good!!! Have a nice day..thanks again ?

Good morning, like you can see between the first and last text when the there is more space than the space between the others texts, how can I have the same space as there is between all other texts? Many thanks Davide

Thanks, i will try if i have some question about gsap i will ask here... Have a nice day Davide

I understand what i mean, If there is someone who helps me and encourages me to learn, also showing me examples (like you) so i can understand how to do it more or less, it becomes important for me and I have more desire to learn. So I really thank you. I managed to do what I wanted, (i can't belive)...if you take a look on the left side you see the images go out of the screen when I scroll while the image in the center gets bigger. Surely there will be errors or adjustments in the code that I created but the effect is a bit like that of the site that I shot as an example. What do you think? Now i can also try to add a sort of parallax effect to every single image..maybe i'm asking too much to my self With locomotive scroll it's easy to add parallax effect to every element, you have just to add a class to you div in html The predefined classes comes directly from locomotive scroll...it's easy. Her you give me a link..i have to check if i will be able. Thanks Davide https://codepen.io/uavide/pen/MWXzEej

cool, thanks, so let me understand if i have a menu (with different buttons) and every button goes to a different page, how can i manage this animation. I thought about a mask that it comes up with this kind of animation (or something like this) when i click every button, and when the animation it goes down it shows the right page that i request from the button. Maybe do you know some codepen that it make already this kind of thing without modify this one. Many thanks Davide

thank you very much for the help..but for me it's too much ...it's amazing to move all the photo but i'm super newbie, so i'm happy with having the side photos move off the screen once I scroll...that's it. I tried adding the images, but when I scroll they don't move. How can I do? Here the codepen: I'm happy with having the side photos move off the screen once I scroll. I tried adding the images, but when I scroll they don't move. How can I do? https://codepen.io/uavide/pen/MWXPRYM Thanks a lot Davide

Hi to everyone, i found this cool animation and i would like to understand if it will be possible to make it start just when i click a button, not automatically like now. My idea it's to have a menu nad every time that i click a button of the menu this mask animation it starts for change the page (like a fake loading). How i can make it works? can you help me? Thanks Davide

@akapowl You are my Herooo!!!!! thank you very much..i really appreciate So it's like a section that has 5 divs, the central div it's the gsap animation, the lateral ones have transform translation css style. I saw that they start to automatically translate when the gsap animation start. I hope to be able to do it for my site (at least something like this) ? Thanks again Davide

Thank you, yes it's gsap animation, that's why i ask here if someone knows something similar that it's be done on codepen.

Hi to everyone, do you know pheraps some codepen with this kind of animation? this is the site: https://spaincollection.com/ I mean, after the page it's opened and loaded, there are some boxes with image and video on the left and on the right and on the center there is a bigger box with video. When you scroll, the bigger box with the video, it goes to the top (like 100vh) and after it start to became biger on the left and on the right (like 100%). Do you know some example like this from codepen? Many thanks Davide

Thank you very much for your help.

Good morning someone should be so nice to let me see a link of some codepen with a basic scroll smoother? Thanks Davide

it works now, the problem it was to make it work in wp + bricks builder..i got it thanks!

oh sorry i didn't know...he should have called it differently this package, anyway do you know some codepen that works with gsap that it's like this? So that it make the same thing...thanks Davide

Good morning, i have this codepen: https://codepen.io/uavide/pen/VwXgWOm that it works with this 2 cdn files: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js If i add this scrolltrigger cdn file: https://cdnjs.cloudflare.com/ajax/libs/ScrollTrigger/1.0.5/ScrollTrigger.min.js instead of this cdn: https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js file, the codepen it doesn't work..why? can you help me? Thanks Davide

Really cool thanks

Hi to every one..i like this kind of effect, how i can make if i would like that when i open the page i see the first name (matias), like now i don't see any name. Thanks Davide

Good morning, i would like tounderstand how i can resize all the animation (container - div - image) not only width (like now) but also height. So like now for tablet and smarphone it start to resize just the width (and like this it cut the image). I would like to resize with the right proportion for height and width also the image. Do you know ho wi can do? Thanks Davide

yes i know, thanks...but finally i found the solutions and i think could be helpful for all the people in the forum that use wordpress and they want to integrate GSAP by enqueue in function.php function theme_gsap_script() { wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/.../gsap/3.10.4/gsap.min.js', array(), false, true ); wp_enqueue_script( 'gsap-script', get_stylesheet_directory_uri() . '/js/gsap-scripts.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );