ReaganWP

Thank you! Yeah I agree with you, learning about svg will help a lot. Thanks again!

Good day, I am learning gsap animation and I am excited to practice animating svgs. What are the tools you guys recommend to create an SVG? or is it manually coded? I was able to apply simple animation on downloaded svg icons from flaticon. Thank you so much!

Thank you! yeah this will help for sure. I am reading the Most Common GSAP Mistakes article right now, thanks for sharing it! Have a great day!

Hi guys, I am learning gsap and I found this issue with the stagger onClick when I click multiple times with the stagger controller buttons. e.g. The monkeys should appear from the center since I click the center button but this is the result I am getting right now. No matter how many time I click the center button that is the animation I am getting. Thank you in advance.

Hi, I am still learning gsap and I just want to ask how to adjust the speed and perfect duration depending on the screen size / viewport of a user. The current one I have is working, but I am having a trouble with the speed and the duration to reach the left end (please check attached video). I tried to follow and understand @mikel codes from this thread. \ but it doesn't work for me. What would be the best way to adjust the speed and the duration time that all the text will reach to the end left. Thank you so much in advance! Here's the video link <div class="wrapperRollingText"> <div class="rollingText text"> <div class="free-shipping">FREE SHIPPING ALWAYS</div> <div class="thc-free"> THC FREE </div> <div class="satisfaction"> SATISFACTION GUARANTEED </div> <div class="lab-tested"> LAB TESTED </div> </div> </div> var rollingTween = new TimelineMax(); var time = 5; var $rollingTextgoLeft = $(".rollingText"); var $text = $(".text"); function startRolling() { $text.css({ width: "100%" }); $text.width(width); var width = $text.width(); rollingTween.to(".rollingText", time, { x: -width, ease: Linear.easeNone, repeat: -1 }); return rollingTween; } function resizeCheck() { var progress = rollingTween.progress(); //record the progress so that we can match it with the new tween (jump to the same spot) rollingTween.time(0).kill(); //rewind and kill the original tween. //time = 5; startRolling().progress(progress); //create a new tween based on the new size, and jump to the same progress value. } resizeCheck(); $(window).resize(resizeCheck);

Perfect! Thank you. I'll try this

Hi is there any specific tutorial on the horizontal scroll? for some reason and I'm not sure why but it's not working in my end. I only know HTML, CSS, JS, and Jquery, and I just started this gsap cool animation.

Gotcha, thank you very much!

Thank you so much for the quick response sir, I'll try it. Was that possible to integrate in WP? Thanks again!

Hi guys, I am a new member here and I just started learning Gsap a week ago. I Just want to ask if there are tutorials on how to create a horizontal scroll like in the video I posted in YT (the link). That website is using gsap. I did a lot of research and did few tests but I can't seem to achieve it. Thank you for your help! Stay safe always! Reagan