PaulTheSwissGuy

Wow ! Thanks a lot Cassie, this is exactly the help I was looking for, plus the little tips it's perfect. I swear this forum is so peacefull compared to stack overflow Have a good day/evening!

Hello ! I'm trying to pin an element all along my website. For this I'm pinning it and I make it end after all the sections height combined. This is working well But I also want to change the SRC of the image in my element each time I enter a new section. And this is where it acts strangely. I'm trying to handle this with onEnter and onEnterBack but you can test it and see that either it's not working at all, or it's working one time on three. Canno't we apply multiply gsap.to() tweens + scrollTrigger to a same element ? Also it's messing up with the width and height of my original element. Thank you

After a long bicyle hike I get where I was wrong, it was about the understanding of requestAnimationFrame() ! I tried a simple test with it and I saw that the RAF method is waiting to add tweens before running again (exactly what you were explaining to my dummy brain in the previous messages ?). I did that test if someone is passing by : function recursion(){ console.log("Global timeline start"); requestAnimationFrame(recursion) } recursion() console.log("+ TWEEN"); console.log("+ TWEEN"); console.log("+ TWEEN"); console.log("+ TWEEN"); So now thanks to your huge help and patience, I know that Tweens and Timelines do not execute themselves right away, they go in a globalTimeline. I can modularize timelines into little functions, which is pretty handy. And also that even if I have 10000 tweens in a row(just for the example), they will all start at the same time, thanks to RAF() running only after executing all that code. You're the best Jack thank's ! ?‍♀️

I wanted to say when the global timelines starts? (sorry for the poor english) If I fill it up with tweens and timelines during the execution of my scripts, it must start at a certain moment, after it, It can't be fed while running ? Is the global timeline detecting the end of all my script and then starts the 60 fps lifecycle recursion, to start only after being fed up with tweens and timelines ? For me that sentence means that a tween or timeline can get stored between two fps, and then played right away since : In my head it looks like that : const globalTimeline = [] function globalTimelineAnimation(){ // run the playhead 60fps } function globalTimelineTick(){ globalTimelineAnimation(); requestAnimationFrame(globalTimelineTick) } // simulation of tweens added to the globalTimeline, (gsap.to()); globalTimeline[0] = {tween1} globalTimeline[1] = {tween2} // Run the global timeline at the end of the script, after being filled up globalTimelineTick(); Sorry for the inconvenience but I'm really trying hard to understand it, also I'm not new to JS so I don't get why I'm struggling with that. Thank's for your patience.

Wow ! Thank you for that, I was misunderstanding it so much ! I was thinking, like you noticed, that everytime you create a tween or a timeline, it gets played right after it. But now I understand that it get stored into a timeline or into the global timeline, and then the global timeline got played 60~~ times with requestAnimationFrame() (I guess); But then a question comes to my mind, when the global timeline runs ? At the end of the JavaScript file ? How the global timeline knows that there won't be more tweens or timelines to add and it can start to move the playhead ?

Hey Zach, thank's for the info. It starts to make sense but now a huge "how" comes to my mind. How can you detect if a Timeline is added to another Timeline before its execution ? Like here : function createTimelineIn() { const tlIn = gsap.timeline(); tlIn.to(element, {opacity: 0, duration: 0.4}); // The tlIn is actually executed HERE when we call it below in the "transition" function. return tlIn ; } function transition() { const tlIn = createTimelineIn(); // How the "tlIn" timeline is not running now ? I'm executing the createTimelineIn(), it should // run the timeline from the body of the function like I commented above const tlTransition = gsap.timeline(); // How the timeline "tlIn" wait till here to know if it is added to a timeline ? tlTransition.add(tlIn); return tlTransition; // and why that final return ? The "tlTransition" should execute with or without return, just by calling the function "transition()" } Sorry but I like to truly deeply understand something when I learn it. Could you explain the different questions I wrote you in the code above ? When we call a method in JavaScript it executes instantly, it does not wait. It doesn't make sense to me, I must have overlooked something but I don't know what ... Have a good day/evening ✌️

Hello people, I'm studying the GSAP library and something looks very strange to me. It's when we create a Timeline in a small function, to return them in one big timeline. I understand the idea, but when we create a Timeline and add a Tween to it, it will play itself, like this : function addTL(){ const tl = gsap.timeline(); tl.to('.cube', {x: 550, duration: 10.4}); return tl; // Why return it ? } addTL() // The Timeline will run If I execute addTL(), the tl will execute and the cube will move. So why i'm seeing something like this on the internet ? function addTL(){ const tl = gsap.timeline(); tl.to('.cube', {x: 550, duration: 10.4}); return tl; } function fullTL(){ const tlFull = gsap.timeline(); const addGsapTL = addTL(); // The addTL is running right there, it's not waiting to be added to the tlFull. tlFull .add(addGsapTL) } fullTL() Even more strange, I saw a course from the "IHateTomatoes" guy, and he's doing what I just told you, he's even returning the "fullTL". Something like this. First, creation of the two TL Functions (previous and next TL) : function createTimelineIn(direction, index) { const tlIn = gsap.timeline(); tlIn .to(element, { // some stuff }); return tlIn ; } function createTimelineOut(direction, index) { const tlOut = gsap.timeline(); tlOut .to(element, { // some stuff }); return tlOut; } And then that strange move to assemble them. function transition(direction, toIndex) { const tlOut = createTimelineOut(direction, currentStep); const tlIn = createTimelineIn(direction, toIndex); // The TL are running right now ? tlTransition.add(tlOut).add(tlIn); // This does nothing ? return tlTransition; // and why that final return ? } I'm pretty sure i've missed something in the understanding of the Timelines. Are they objects or methods ? Are they executing themselves when we add something to it ? And why return them, and why even return the final Timeline ? Thank's if someone is passing by, have a nice day ✌️

Ah ! Find a solution, it's working on Firefox ... But a solution for Chrome would be good How do you preview your animations with VS Code guys ? You are not using the Live Server for simple projects ?

Ok guys thank you ! It's mostly due to the "live server" Vs Code extension. But I can't code without it, it's so useful, and I love to change the value of the properties I animate, just to see how it looks. There is no solution at all ?

Hello people ! I made a simple .to tween, it's actually working if I open my live server and arrive on a new page. But I soon as I change my JavaScript, the tween is tweening from the middle of its animation, and not from the beginning, it's very frustrating. It was not happening before, this is kinda new. I made a video for you : https://www.youtube.com/watch?v=VWO7RofzSoE I'm coding with VS Code, with the live server extension + autosave on. The code is dead simple : HTML : <div class="cube"></div> CSS : .cube { background-color: orangered; width: 300px; height: 300px; } JS : const cube = document.querySelector(".cube") gsap.to(cube, { duration: 2, x: 300 });

Hello people ! Today I wanted to try to use GSAP with a simple project, just an html file, using a 'npm install gsap'. The installation works fine, a node_modules is created, but then I have trouble linking my JS and the GSAP library via ES6 modules. import {gsap} from "./node_modules/gsap/gsap-core.js"; const title = document.querySelector("h1"); gsap.from(title, 0.4, { color: "red" }); It's not working and I have this message in the console : "Invalid property color set to red Missing plugin? gsap.registerPlugin()". Also I have a second question about using gsap with a simple project like that, how can I keep the gsap library for production when i'm finished ? How can I remove the node_modules but keep the gsap library to make it work ? Thank's so much if someone is passing by, I can't get my around since few hours!

Hey Zach thank's for your reply ! Your article taugh me some sweet tricks like Keyframes, default values or animating multiple elements at once ! Unfortunately I didn't get precisely where I should define my Timeline, inside or outside my Event ? Because if I try to define it outside it gives me this, I have a scope problem I guess : https://codepen.io/PaulTheSwissGuy/pen/vYXpJXW Or maybe I should define my Timeline outside and "fill it" with animations inside the event ? It looks like they've done that in the example you gave me.

Hello fellow lovers of web animations ! I have an idea of a huge slideshow with a lot of animations, but I want my foundations to be solid before going crazy with the animations. Is it the right thing to do to employ a gsap timeline in a function like I've done in my Codepen example ? https://codepen.io/PaulTheSwissGuy/pen/ZEpvYEz Is there a better choice ? Is it good in term of performance / memory ? Also is my "index"/"offset" mecanism good ? I already watched this example : https://greensock.com/forums/topic/19393-fullscreen-sliders-horizontal-and-vertical/ This is pretty impressive and really complete, but It's also quite complicated to grasp at first (I will look at it again the following days) All right thank's for your lights ?