TeddyBrown

Thank you Zach! Have a nice day!

Hi Nekiy2! Thank you for your answer! Yeah in GSAP with ScrollTrigger there are two curly braces less but I need the JSON strings to later parse them into an object (you can't use string). In GSAP it works but with ScrollTrigger no! I just need to understand how to write the code to let them works also in ScrollTrigger!

Hi guys! I didn't want to start another topic, so I take advantage of this one! I don't understand how to use data-attributes and ScrollTrigger together. <div class="box-wrapper"> <div class="box" data-from='{"yPercent": "0", "rotation": "60"}'></div> <div class="box" data-from='{"yPercent": "90", "rotation": "20"}'></div> <div class="box" data-from='{"yPercent": "40", "rotation": "10"}'></div> <div class="box" data-from='{"yPercent": "5", "rotation": "0"}'></div> <div class="box" data-from='{"yPercent": "10", "rotation": "20"}'></div> </div> gsap.utils.toArray('.box').forEach((elem, i) => { let from = JSON.parse(elem.dataset.from); gsap.from(elem, { from, scrollTrigger: { trigger: ".box-wrapper", start: "top bottom", end:"bottom center", scrub:true, markers:true } }); }) Invalid property from set to Objectrotation: "20"yPercent: "10"__proto__: Object Missing plugin? gsap.registerPlugin() Here's the codepen link: https://codepen.io/teddybrown/pen/OJMdxZY I know it's a dumb question but please give me some hint! Thank you!!!

Thank you guys for your answers! @mikel Yeah, I've read about Intersection Observer API but I thought it was redundant since I was already detecting scrolling. @ZachSaucier The example of OSUblake is great, but it's not so easy to understand how to apply the logic on animate elements. Anyway, I will try some approaches and then come back if something is not clear! Thanks, Teddy

Hi Jack and thank you for your answer! Actually what I want to do is just replicating what Scrollmagic do without using it, so yes, as you said, animate each element while scrolling. Now after adding one tween for each timeline it works as expected but I still miss something. What I would like to have is something really smooth (this is a perfect example: Pleanaire). I've seen somewhere here in forum, that I could use a proxy tween to make the progress smooth, do you(all) think it's a good solution? And since you mentioned it, could you(all) give me some advices about the logic and the structure of the code (I know i'm really bad at it)? Thank you very much guys! Teddy

Hi everyone! I'm testing smooth scrolling with a scroll driven animation and I don't understand why the progression of the animation is not working. Could everyone please help me ? Thanks in advance! Teddy

Hello everyone, I am new to this place and I'm quite new to the GSAP world. I'm very excited about working with this library and watching the examples I was really impressed with this one. I have seen that there is a huge use of three.js library and I was wondering about how three.js and GSAP works togheter. For example, the camera movements are just made with three.js or there is a way to replicate that animation only with GSAP or both? I'm just looking for some hints! Thank you in advance! P.S. If I'm in the wrong section or off-topic, please forgive me!