Mike H D

Ah so progress was the right thing to use, but I was applying it wrong! Thanks for the pointer that is working great

Hi all, Sorry for digging up an old post, but I am trying to modify this setup a bit and am struggling to work out how to do it. This is where I am with on Codepen: https://codepen.io/MikeHarrisonDesign/pen/WNYdwLy When the close button is pressed, instead of the animation playing in reverse, I don't want the animation to run at all, I would like it simply to reset. So the menu disappears the instant the close button is pressed. I tried using progressto reset it but that didn't work. What is the best way of doing this?

Brilliant, thanks both for your patient help. That is working like a charm

Thanks @The Old Designer for the pointer, I have given the video a watch and have a bit better understanding now. I have done a new codepen, and implemented matchMedia on it. This is working a bit better, but for some reason the button to trigger the dropdown is only working intermittently? It seems to work on first attempt, but then if I resize to large and the back to small it stops working. Thanks for your help, if you could let me know where I might be going wrong with this that would be great. https://codepen.io/MikeHarrisonDesign/pen/WNYdwLy?editors=0010

Hi, I am working on a responsive nav, where I would like it to work in the following way: On large screens, show the company logo on the left and the navigation listed horizontally to the right On small screens, show the logo and a menu button, which triggers the navigation to slide down and cover the whole screen. I have got pretty close, the small screen behaviour seems to be ok, but on larger screens my navigation menu is still translated up and my elements are still invisible. I think this is where I need to be using matchmedia, I have tried to implement it but I don't think I have the syntax quite right. If anyone could point me in the right direction that would be awesome

Thanks everyone for your patient help. I am really close now - I have the slides looping, and internal elements animating in as I would like. I have attached a codepen of my updated code. I have gone for @SteveS approach to the loop as I understand how that works a bit better. The only thing I am now struggling with is I would like the first slide, when first shown, to have the internal elements animate in. Currently the first slide to have them animate in is slide 2 (and then all subsequent slides). What would be the best way of doing this? https://codepen.io/MikeHarrisonDesign/pen/ExOXVgL

Thanks both for your help, I can see where I was going wrong and how your solutions worked. I now have the following setup, where the slides are fading in in a loop, and in sequence. I now need to get the internal elements to fade in as well, after the slide itself has faded. I have set up a timeline for this, but am not sure how to trigger it inside the loop that is controlling the main animation. I am working through Carl's wonderful course, but am still early on in my GSAP journey so I may be approaching this in entirely the wrong way! This is probably going to be a common implementation for me (slideshow with animated elements inside each slide), so it would be great to crack the right approach for it. The number of slides is out of my control (CMS generated) so I need to make it work with any number. https://codepen.io/MikeHarrisonDesign/pen/XWyRRNp

Hi, I am trying to get an infinite looping slideshow to work on a site I am currently building. The looping is working great, but some elements inside the individual slides are behaving oddly. I have attached a codepen link, but briefly the setup is: I have a stack of slides, which is their non-javascript fallback state Each slide has an image in, which is absolutely positioned to cover the whole slide (I need this as the images need alt text etc. and are part of the content, so I can't use background image) Each slide also has some text, an svg and a button. These have a z-index applied so they sit above the absolutely positioned image When the javascript kicks in, I stack the slides using grid and then gsap does its magic. The issue is the child elements in the slide aren't fading along with the rest of the slide. You will see what I mean in the codepen. If anyone has any thoughts that would be awesome, it feels like a z-index / stacking context issue, but I am not sure. Also, apologies for the massive inline SVG elements but I thought I would include them in case they were relevant to the issue. Eventually I want the elements inside the slide to fade in later than the background image, but I need to cross this bridge first! Thanks!

Hi, I have a card flipping animation working perfectly everywhere apart from mobile Safari. In that browser, as the card flips it half disappears. I think this is due to one of the parent elements having a white background, and my card is rotating below that if that makes sense. At the end of the animation the whole card is visible again. This is my code: gsap.utils.toArray(".card-wrapper").forEach(function(card) { gsap.set(card, { transformStyle: "preserve-3d", transformPerspective: 1000 }); const q = gsap.utils.selector(card); const front = q(".front"); const back = q(".back"); gsap.set(back, { rotationY:-180 }); const tl = gsap.timeline({ paused: true }) .to(front, { duration: 1, rotationY: 180 }) .to(back, { duration: 1, rotationY: 0, rotationZ: "random(-6, 6)" }, 0) .to(card, { z: 50 }, 0) .to(card, { z: 0 }, 0.5) tl.reverse(); card.addEventListener("click", function() { tl.reversed() ? tl.play() : tl.reverse(); }); }); I think what I need to do is lift the whole thing up on the z axis, so when it spins with rotationY it doesn't intersect with what is below it. I am not sure how to do this without it affecting the perspective, which is looking really nice when it spins.

Awesome, thanks @Carl that has done the trick

Hi, My first time playing with GSAP, and it is going great so far. I am animating a card flip on click, this is my code at the moment: gsap.utils.toArray(".card-wrapper").forEach(function(card) { gsap.set(card, { transformStyle: "preserve-3d", transformPerspective: 1000 }); const q = gsap.utils.selector(card); const front = q(".front"); const back = q(".back"); gsap.set(back, { rotationY:-180 }); const tl = gsap.timeline({ paused: true }) .to(front, { duration: 1, rotationY: 180 }) .to(back, { duration: 1, rotationY: 0, rotationZ: "random(-6, 6)" }, 0) .to(card, { z: 50 }, 0) .to(card, { z: 0 }, 0.5); card.addEventListener("click", function() { tl.reversed() ? tl.play() : tl.reverse(); }); }); Which is nearly working perfectly. The only issue is I need to click twice initially to run the animation for the first time. After this it works with a single click, running the animation forwards or backwards depending on what is needed. I guess this has something to do with how I have used the ternary operator in the click listener, but am not sure what to do to fix it. If anyone has any thoughts that would be awesome.