ilyasseisov

Hi! Please tell, is it possible to create a custom simple "Animate on Scroll" GSAP plugin? Nothing fancy, just when user scrolls element fades up. Usage example: <p class="fade-up">hello</p> The "fade-up" class comes from custom GSAP plugin. Thanks in advance!

Thank you for your help!

Thanks. Here is a demo on Codepen: https://codepen.io/jssecrets/pen/MWxRbxX I need a number animation effect. In the demo, the number's change should be happening in console. But it doesn't. On my machine the script without ScrollTrigger works.

Good day! I'm trying to use simple setInterval() with onEnter() of ScrollTrigger. The code works. The ScrollTrigger - triggers. But together they don't work. Hers is the code: Value animate function: const animateValue = (startVal, finishVal, durationVal) => { // let startValue = startVal; let finishValue = finishVal; let duration = durationVal; let increment = Math.trunc(((finishValue - startValue) / duration) * 50); let current = startValue; let interval = setInterval(() => { // current += increment; if (current >= finishValue) { clearInterval(interval); current = finishValue; } console.log(current); // }, 10); }; ScrollTrigger const odometersAll = gsap.utils.toArray('[data-odometer]'); // // odometersAll.forEach((odometer) => { // ScrollTrigger.create({ trigger: odometer, start: '-240px 30%', markers: true, onEnter: () => { // animateValue( parseInt(odometer.dataset.odometer), parseInt(odometer.textContent), 3000 ); // }, }); // }); What is the issue? Thanks in advance!

Thank you very much Carl! It helped! ?

Thank you! But there is a white space that appears from somewhere and the purple section moves inside of it. I've attached the image. Is it possible not to have it? Can the purple section be fixed in place until image is done moving?

yes.

Hi ? Yes. Can you help with this?

Good day! ? Could you please take a look a simple Pen: https://codepen.io/jssecrets/pen/abPvyWJ I don't understand why the image gets out its container? How do I pin it in place until the animation is finished? Thanks in advance!

Good day! I have several timelines. They work as expected, but when I add defaults: { ... } to all of them, only the first one works, other don't. (I also use ScrollTrigger) What might be the case? Thank you!

Good day! ? Could you please take a "Projects" section at https://deveb.co/. The same effect is here too https://cuberto.com/ Do you have an idea how it's done? Maybe some reference? Thanks in advance!