emilychews

Thanks Zach

Actually Zach that isn't working. The blue square now shows at the beginning of animation. It's only supposed to show after the cover has animated away, so it's basically revealed as the overlay animates out. I encountered this problem when I tried setting the initial value in my CSS.

Thanks Zach.

Hi, I have a scrollTrigger which animates an image overlay in an out. During the animation when the image cover is at 100% width the image appears behind the cover so when the cover then animates out in the second part of the animation the image is revealed. The problem I have is that when next instance of an image appears the scrollTrigger causes all of the images to disappear again because opacity 0 is set. I'm trying to work out a way of having it so once each image instance appears it will then stay at opacity: 1 Is there anyway of adding a CSS class via scrollTrigger so in my CSS I can have something like .image.done {opacity: 1} or is there a better way of doing this? The other part of the animation isn't affected because it is covered by theforEach() method that is tied to the scrollTrigger. **Note: in the Codepen the 'image' is the blue inner box

Thanks Jack. That's great. Just out of interest (because I may be doing something with the canvas API soon). If I do want to generate values with the Math.random() and then restart the animation from the start again, what is the best way to do this (links to methods in the docs etc will be fine). I couldn't seem to find how to do it.

Hi, I have three vertical bars that I'm scaling up and down to represent music (they won't be linked to any audio file). I'm using Math.random() to generate a scaleY value and am repeating the animation with the yoyo effect, but need a way of reseting the Math.round() value after each execution. At the moment the animation just repeats using the initial scale value. My hunch is to add something to anoncomplete method and remove the repeat parameter, but I can't seem to see how best to approach this? Any help would be wonderful. var soundbar = document.getElementsByClassName("sound-bar"); gsap.set(soundbar, { scaleY: 0.1 }); gsap.utils.toArray(soundbar).forEach(function (bar) { gsap.to(bar, { duration: 1, scaleY: Math.random(), ease: "none", yoyo: "true", repeat: -1 }); });

Hi, Is it possible to start a scrollTrigger animation based on when the user first scrolls as opposed to it being in a particular position in relation to the window object? I guess in pseudo code it would be start: "+=1" so it triggers when the user has scrolled a least one pixel. It's for a project where certain elements are randomly generated and I would like them to parallax away when the user scrolls. var box = document.querySelector(".box"); gsap.to(box, { y: -450, scrollTrigger: { trigger: box, start: "50% 50%", end: "100% 0", scrub: true // markers: true } });

Hi, On your main scrollTrigger video tutorial, at the beginning it gives an example of how scrolling faster (more velocity) increases the skew on some images. That wasn't touched on later in the video, and I can't see in the docs how to do this? Do you have a link that explains how to approach this? If it's easier I've also set up a CodePen attached that's all ready to go. Any tips or links etc greatly appreciated. Kind regards, Em

Hi @michelgege Did you have any basic code / pseudo code you could post showing your setTimeout solution. I can't get this to work. I have the function, and it's function call, within a setTimeout as given in the example below - but alas it isn't working? setTimeout(function(){ scrollTrigger.refresh() function pinMiddleFunction() { var pinMiddle = gsap.timeline({scrollTrigger: { trigger: ".pin-section", start: "50% 50%", end: "+=650", pin: true, markers: true }}) } pinMiddleFunction() }, 1000)

You know that is so embarrassingly simple. I love GSAP, but often go months at work without using it and then seem to forget the obvious stuff. Thank you ever so much for helping. Thankfully another one or two issues I had I solved via the docs but really appreciate you taking the time to help.

Hi Zach, That has sorted the situation in regards to the button not disappearing as it should when you scroll back up past the scroll trigger point on mobile. I still have the problem though that if I scroll past the button on desktop (i.e. to the bottom of the page) and then resize the window from desktop to mobile (less than 579px), the button does still disappear until I scroll up and down again? Thanks

Hi, I posted a topic over the weekend where solving one problem seems to have created another. This demo is a simplified version of a page that is going to have two posts/articles per page and then a 'next post' button below the final/2nd article (which then links to another page with two articles etc). On mobile I want it so the button appears after the user scrolls past the bottom of the column containing the two articles (on the actual site, below the articles are a couple of adverts, a sign-up form, and a footer). The problem I now have is two-fold, but probably being caused by the same issue, namely 1) when I scroll past the button on desktop and then resize the window to mobile size the button doesn't show unless I scroll up and down again and also 2) if I refresh on mobile size, after the button shows it doesn't disappear again when you scroll back up past the initial scroll trigger (i.e above the bottom of the second article). For the avoidance of any doubt, on desktop the button is 'position:relative' and on mobile screens less than 579px this changes to 'position: fixed' Note: I've done this as a new topic because now my other problem was solved it seemed a lot easier to digest as a new post. I thought it may be 'toggleActions' issue, but nothing I tried on this seems to solve the issue? Thanks in advance for any help

Hey, thanks Petr for such a brilliant answer. I'm not back off vacation / in front of a computer until Wednesday, but wanted to say thank you in advance for taking the time to answer.

Hi, I have a 'Next Post' button on a site that links to the next post in chronological order. On mobile I want to change the position to fixed so it stays in the bottom of the screen after you scroll past the main text. The problem I'm having is when I reduce the window size down, this does indeed happen, but when I resize the window back up the button disappears. I have a JS 'resize' event on the function that fires the GSAP scroll trigger so am a bit confused what's happening? Any help would be wonderful.

Thanks @ZachSaucier and @mikel