[mask svg zoom shows image behind]

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

[onscroll doesn't scroll]

Ooohhh.you are rigth...i forgot

Many thanks

[onscroll doesn't scroll]

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

See the Pen GRzjNoa by uavide (@uavide) on CodePen

[element move pan]

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

[element move pan]

yes..supercool!!!... just one thing...instead of Id gallery

How i can use class . gallery? it will be possibile?

Many thanks

[element move pan]

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

Thanks

See the Pen NWMVLbE by TheAnhPham (@TheAnhPham) on CodePen

[horizontal auto infinite scroll]

wow!!! thanks..it works really good!!!

Have a nice day..thanks again 😎

[horizontal auto infinite scroll]

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

See the Pen zYLOQMa by uavide (@uavide) on CodePen

[add button that start the svg mask animation]

Thanks, i will try if i have some question about gsap i will ask here...

Have a nice day

Davide

 

[animation..could you help me?]

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

 

See the Pen MWXzEej by uavide (@uavide) on CodePen

 

 

[add button that start the svg mask animation]

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

[animation..could you help me?]

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?

See the Pen MWXPRYM by uavide (@uavide) on CodePen

Thanks a lot

Davide

[add button that start the svg mask animation]

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

See the Pen XWzjqrv by GreenSock (@GreenSock) on CodePen

[animation..could you help me?]

@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

 

[animation..could you help me?]

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.

 

[animation..could you help me?]

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

[scroll smoother basic]

Thank you very much for your help.

[scroll smoother basic]

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

Thanks

Davide

 

[scrolltriger cdn file change doesn't work]

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

[scrolltriger cdn file change doesn't work]

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

[scrolltriger cdn file change doesn't work]

Good morning, i have this codepen: 

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

 

See the Pen VwXgWOm by uavide (@uavide) on CodePen

[[ScrollTrigger] Vertical Slider]

Really cool thanks

[[ScrollTrigger] Vertical Slider]

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

[resize div and image for tablet smartphone]

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

See the Pen PoRmLxo by uavide (@uavide) on CodePen

[enqueue gsap in Function.php for wordpress]

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' );