Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

4 Newbie

About PaulTheSwissGuy

  • Rank
  1. 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!
  2. PaulTheSwissGuy


    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 m
  3. 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.l
  4. 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 l
  5. 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 ?
  6. 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 ex
  7. 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 see
  8. 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 ?
  9. 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 ?
  10. 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 :
  11. 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
  12. 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.
  13. 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