mvaneijgen

Is something like this what you are looking for? https://codepen.io/mvaneijgen/pen/JjEZxGx?editors=0010 I had to delete some of your css to make sure there was no conflict with your GSAP animation. I've set your animation to a timeline to make it play on a timeline between the scrollTrigger. Also I've moved the perspective to the css, I always forget how perspective works in css, but would think it would be smoother to just set it in css and don't animate it with GSAP, but don't quote me on that.

Just don't make a master timeline if you want to have two separate timelines, that is all you need right? https://codepen.io/mvaneijgen/pen/oNBGbLZ

Can you create a code pen with your use case? Because I've copied your code to a pen and I'm trying to make sense of it andI'm not getting it. https://codepen.io/mvaneijgen/pen/bGgVQpa Right now at `openSidebarBtn.addEventListener()` you're creating a timeline and I would not do this, because now each time you click you create that whole timeline. Better is to also split that out to a function and call that. You already adding things to a timeline within your `overlayAnimations.forEach()` and that is how it works. Create a function with your timeline, ret

@cr33ksid3 That is why I've said I did this to get the code working as you wanted it to. I've only ever used a timeline in a function to `.add()` it to a other timeline. Good luck

When I just create a variable to the timeline (removed it from the function) and do `animLogo.play()` it works as you want it to. I've also set `{ paused:true }` to the time line to stop it from playing on page load. Here is the code I have right now: https://codepen.io/mvaneijgen/pen/LYxERww Your next animation (animBoxTL) doesn't do anything, because you didn't tell it to do anything tl.to("#boxTR", { duration: 3, // the time of the animation yoyo: true, // Moves forward and backwards if there is an repeat (which is not set) https://greensock.com/docs/v

@ZachSaucier thanks! This seems to work great! Again not really a GSAP question, but just a JS solution, I've never heard of `.cloneNode` thanks for that. Now I only need to find a solution for the next and previous buttons to do something when at the end or beginning and clicking next or previous respectively, right now it will animate fully to the latest label when at the beginning and clicking the previous button. Again thanks, this helps a lot.

I've used several slider plugins in the past and now thought: "I'm already using GSAP why don't I try creating a slider based on it". I saw @Carl's latest video (snorklTV youtube.com/watch?v=4Q5uzDaTlDU) and it seemed like a great starting point of creating a slider. I've implemented an `autoPlay()` function which gets call every `X` amount of seconds to `.tweenTo()` the `.nextLabel()` which all works great. The point I'm stuck on is how to play to the end of the timeline when there are no more `.nextLabel()`'s, then jump to the beginning of the timeline (I thought `.seek(0)` wo

I think the problem is with creating a `.timeline()` you are better of just using `gsap.to()` without the time line, than it will just call it instantly instead of trying to add it to the timeline. `velocity` is as far as I know only something used in combination with Draggable and ScrollTrigger. Also I would not put on an `ease` to make it responde instantly https://codepen.io/mvaneijgen/pen/GRNajvx?editors=0010 Just a semantic question: why are you not using the `<progress>` element , seems like a perfect fit https://developer.mozilla.org

You could `.set()` the opacity with `autoAlpha` to the elements to hide them by default. Then when the animation runs set the opacity back to 1 and I would animate `.from()` instead of `.fromTo()` if you don't change the end value. https://codepen.io/mvaneijgen/pen/QWGrxgK?editors=1010

I would advice starting somewhere and sharing your findings. If you just make something and put it on codepen.io/pen it makes it so much easier to help you.

When I get stuck I open a Codepen.io/pen and see what I can manage to get working. I usually fork my work several times to test out different ideas, this is the best way of learning I've found. And when nothing else works I could share the codepen URL with others to ask for help. I've dumpt your code in a pen and the first notice I get is that you've divined `yMove` twice const yMove = document.querySelector(".cocktail") var yMove = 50; https://codepen.io/mvaneijgen/pen/zYoRNoG?editors=0010 I've got something working, but have no idea what it sho

There are some extra things you need to do when you want to animate `:pseudo` elements. You'll need the CSSRulePlugin see following post and the docs. https://greensock.com/docs/v2/Plugins/CSSRulePlugin Also try to make a minimal demo and share that, much easier to help you with a live demo instead of looking at raw code.

@JoaoJack could you also post an attempt written by your self, that way we could see your thought process and help point you in the right direction. I would take a look at the `onUpdate:` property https://greensock.com/docs/v3/Plugins/ScrollTrigger video example (start at 18:40) here you get the process of scroll and I would try and set that as the progress of the video. Hope it helps

I see you've updated your pen, it is much clearer now what you want to do, would be nice if you add the GSAP code you would think you would need, then we can see your thought process. This is the closes I can get https://codepen.io/mvaneijgen/pen/RwoGJmg Maybe you could explain what you are trying to do? Now we know only the end goal but if we know the context maybe there is an easier solution.

@Baret where do you get your shapes from? I've opened a vector program drawn a arch for the end shape, copied and modified that line to be the start shape and did a morph between the two `#id`'s https://codepen.io/mvaneijgen/pen/xxREWrg For good measure changed the color to red like in your drawing. Hope it helps.