mvaneijgen

Hey it really helps when you provide a demo of your code, it also makes it a lot easier to jump in the code and tweak, this way it makes it more likely that more people will help you. Right now we first have to copy your code install GSAP in a Codepen and get something working before we can help you. But I would crate a function of your timeline and return the timeline either normally or in reverse based on some logic you provide function child(someLogic){ const tl = gsap.timeline(); // your animation if(someLogic){ return tl.reverse() } else{ return tl } } then you can use `parent.add(child(true))` or `parent.add(child(false))`

I'm currently in the process of building a slider of sorts using GSAP. It animates between two 'slides', so it never loops, because it is always an animation between two elements. This also allows me too animate between the first and the last item if desired. https://codepen.io/mvaneijgen/pen/YzQZBgr This is more a slider and it will wait ever X amount of seconds before sliding to the next slide, but this can of course be decreased. My example has a really 'fancy' animation, but this is just to show what is possible thanks to GSAP. I wanted to build it this way so I could easily swap out the animation to be like in your example vertically, so if you want you can easily change the code to your liking. This is my first (working version) and I'm not sure if I would use this in production already, but it works and it does what I want. Edit: Did some tweaking to see if my code could adapt to create something like your demo and it was indeed possible https://codepen.io/mvaneijgen/pen/OJgzPbQ?editors=0010

Both `tweenlite` and `tweenmax` are of version 2 of GSAP. Have you checked the docs? https://greensock.com/docs/ there you can find most everything

I've used Vue.js and GSAP often in Vue 2, not 3, but I know that you needed to crate the timeline in the `created` lifecycle, which is now just build in to `setup()` (i think?) I've uncommented your `onMounted` hook and split off the creation of the timeline, which makes is as far as I can see working https://codesandbox.io/s/headless-bird-8zc4z?file=/src/views/Home.vue

As a beginner I would suggest starting your code within code pen and testing your code there. If you then feel comfortable only then move your code over to a local setup. There is so much that can go wrong with your local setup, that it is hard to debug with a few screenshots. Codepen also lets you export your code with it all working and setup for you. https://codepen.io/mvaneijgen/pen/BaRvJOp BTW your code is all working, so the way you try to import GSAP in your setup is not working, as @OSUblake suggests just use script tag

Sure. I've just copied the timeline logic and add it to the end. Add a new image and tweaks some css and another image is add to the scroll animation. https://codepen.io/mvaneijgen/pen/WNRqbKw?editors=0010

SplitText adds `div`s to your HTML to work its magic. And your gradient effect bases on background image only works on the element that has text in it directly, so you have to modify your CSS to have the gradient show on the element that will be created when SplitText did its magic. It looks like your splitting your text twice, once just for lines, but the other time you split it with everything, lines, words and characters, so the last word is split up all in letters which will make it hard to add your gradient back. I've removed your second split and then the last word will be blue https://codepen.io/mvaneijgen/pen/zYNVOEy?editors=0010 If you must have that second SplitText I've also have a modified css version which add the gradient css to all elements within `.span-gradient * {` (line 14) https://codepen.io/mvaneijgen/pen/jOyjNaY?editors=0110

There is a difference between `get_template_directory_uri()` and `get_stylesheet_directory_uri()`. `get_template_directory_uri()` always gets the parent theme directory `get_stylesheet_directory_uri()` get the directory of the current theme (eg the child theme directory) maybe this is your issue, but it hard to tell with out seeing a live demo

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, return the timeline and `.add(YOUR_FUNCTION)` to the other timeline. If you could fix the codepen with your test case and share that here, we could maybe give you some points in the right direction, if things are still not clear.

@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/v3/GSAP/Tween/yoyo() transformOrigin:"50% 50%" // Sets the origin of the elemetns tranfrorm // Missing animation. For exmaple rotation:90, }); Here is your code working with a rotion add and the same tweaks as my first example https://codepen.io/mvaneijgen/pen/WNRbooM

@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)` would work, but I think I'm missing a step) and then `.tweenTo(timeline.nextLabel())` again, with this I'm getting the following error in the console `timeline.tweenTo(...).seek(...).tweenTo is not a function