Giuliano Maria Lodi
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Giuliano Maria Lodi
-
-
Hi, I'm trying to create an animation where the effect should be similar to waves appearing from the center in a loop like this example.
I tried to put together an animation with gsap but I'm not succeeding on doing it.
Maybe someone can point me to the right direction to follow.
The animation should be similar to this one https://www.instagram.com/p/CJrYX60AYqS/
Thank in advance for your help...
See the Pen VwPOyQg by giulianomlodi (@giulianomlodi) on CodePen
- 1
-
Hi, it's working now! Thank you so much. I think I was doing wrong using multiple .to
-
Hi, I'm trying to reproduce this effect https://oasiscannabis.co but I'm really stuck.
I'm using GSAP and scrolltrigger to make it works but the thing is that on my code the scaling is not smooth but it goes from scale 1 to scale 2 directly. I would like it to scale smoothly as in the reference website.
I'm working on WordPress with elementor as visual composer.
Thank you in advance
This is the webpage I'm working on http://www.beyconsulting.it/Factanza/test-nuovo/
This is my code:
<div class="svision"> <img class="totale" src="http://www.beyconsulting.it/Factanza/wp-content/uploads/2021/03/Frame.svg" /> </div> <script> var scroll1 = new TimelineMax(); scroll1 .set('.totale', {scale:1, transformOrigin: "center top"}) .to('.totale', { scrollTrigger:{ trigger: ".totale", start: "top 60%", markers: true, ease: "expo.out", duration: "100%", delay: 0.2, toggleActions: "play pause none reverse", }, scale: 2, y:"-50%" }) .to('.totale', { scrollTrigger:{ trigger: ".totale", start: "top 20%", markers: true, toggleActions: "play pause none reverse", }, scale: 4, y:"-100%" }) </script>
Wave animation with gsap
in GSAP
Posted
That's GREAT man! Thank you so much!
I would like to hug you right now! Have a great day you help me learn a lot