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

Hi, I have a pinned animation that also has an opacity animation on it. This all works OK when it animates in. When I scroll to the onLeaveBack scroll position where the animated box disappears in preparation for it to start again onEnter it just snaps to opacity 0 with no animation. Is it possible to animate this specific part of the process? So it disappears as smoothly as when it animates in? I did try doing this as a separate animation, but with the two sets of toggleActions it didn't seem possible? In the CodePen you can see what I mean with the red box as it leaves the window at the bottom after you've scrolled down and then go back up again. Many thanks

Hi, Is there anyway of pinning an element permanently? I need some type of infinity value to put in the end property. The .box-2 element is going to be for an ad that comes in and gets pinned at the side of article and I need it to stay fixed in position permanently once pinned. Many thanks for any assistance. Em.

Hi, When you add a scrub property to a scrollTrigger, does the allocated ease still apply? Obviously the duration property no longer applies, because the time is then bound to the scroll itself (i.e. a mouse-wheel etc), but wondered if the scrub animation still follows an ease curve? Many thanks, Em

Thanks Zach. That's fabulous.

Hi, Is there a way of triggering different instances of the same CSS class as they enter the viewport. I've tried playing around with the ScrollTrigger.batch() method but can't seem to get this to work. In the below CodePen I'd like each of the.box elements to animate individually as they enter the view port as opposed to them all animating when the first one does. Thanks in advance for any help

Thanks Mikel

Hi, I have a scrollTrigger where an element is tweened using the scrub property so it produces a slight parallax using y:-100 , and when it gets to the middle of the viewport is the pinned with the pin property. At the moment this causes the tween to jank back 100px when the second scrollTrigger is activated. I guess what I need on the 2nd scrollTrigger is the equivalent of having a start value of start: "0 (50% -= 100)", although I know that property value isn't valid. Is there a way of having a start value of a tween in a position that is percentage value + pixels? In the CodePen example below you can see that box-3 jumps when the 2nd scrollTrigger is activated. Any help would be awesome.

Hi, I'm just starting out with the new ScrollTrigger plugin and I can get it play ball with the gsap.to object, but can't seem to get it work if I use it with var tl = gsap.timeline(); and then tl.to ? Can you only use the scrollTrigger plugin on a `gsap` object ? gsap.registerPlugin(ScrollTrigger); // GSAP TIMELINE var tl = gsap.timeline(); tl.to(".box-3", { scrollTrigger: ".box-3", duration: 3, opacity: 0.1 }); Many thanks, Em

Thanks @PointC I deleted my initial reply because I see it is part of TweenMax (it was a question about how to add it to codepen because it's not on the list of plugins you can try on codepen).

Hi, I'd like to animate an SVG <feTurbulence> filter, where I can animate the `baseFrequency` and `numOctaves` values down to 0. How do I select these values to animate them in GSAP, and is this possible? Codepen link attached, but I guess on a theoretical level it will either be something like this: Pseudo Code Tweenmax.to (feTurbulence, 1, {numOctaves: 0, baseFrequency: 0}) Or would I do it something like this: Pseudo Code TweenMax.to([numOctaves, baseFrequency], 1, {opacity: 0}) And of course once I know which of the two theoretical ways is correct, how would I select with the turbulence filter itself or its attributes. I've traditionally only used GSAP on DOM or SVG elements and not filters or filter attributes so this is a tad confusing. Many thanks in advance for any assistance.