[Have Item Within A Timeline Keep Its End Animation State Even When Other Items With The Same CSS Class Animate In]

Thanks Zach

[Have Item Within A Timeline Keep Its End Animation State Even When Other Items With The Same CSS Class Animate In]

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.

[Have Item Within A Timeline Keep Its End Animation State Even When Other Items With The Same CSS Class Animate In]

Thanks Zach.

[Have Item Within A Timeline Keep Its End Animation State Even When Other Items With The Same CSS Class Animate In]

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 

 

 

 

See the Pen LYRwQdV by emilychews (@emilychews) on CodePen

[Generate Random Scale Values with Math.round() Method That Refreshes After Each Execution]

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.

[Generate Random Scale Values with Math.round() Method That Refreshes After Each Execution]

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
  });
});

 

See the Pen gOMEpqe by emilychews (@emilychews) on CodePen

[Start ScrollTrigger On Initial Scroll Regardless Of Element Position]

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
  }
});

 

See the Pen bGeByNY by emilychews (@emilychews) on CodePen

[Skew On Scroll Velocity]

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

See the Pen bGeByNY by emilychews (@emilychews) on CodePen

[ScrollTrigger don't work when page is loaded with ajax]

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)

 

[Button Not Resetting When Scrolling Back Up to Scroll Trigger Point]

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.

[Button Not Resetting When Scrolling Back Up to Scroll Trigger Point]

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

[Button Not Resetting When Scrolling Back Up to Scroll Trigger Point]

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

See the Pen VwaMQBb by emilychews (@emilychews) on CodePen

[Add Position Fixed On Window Resize For Smaller Screen And Remove For Larger Screens]

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.

[Add Position Fixed On Window Resize For Smaller Screen And Remove For Larger Screens]

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.

 

See the Pen YzqQMwP by emilychews (@emilychews) on CodePen

[Have An Animation Animate Out 'onLeaveBack' with Scroll Trigger]

Thanks @ZachSaucier and @mikel

[Have An Animation Animate Out 'onLeaveBack' with Scroll Trigger]

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

See the Pen QWymPPB by emilychews (@emilychews) on CodePen

[Keep Element Pinned Permanently]

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.

See the Pen gOPoWJO by emilychews (@emilychews) on CodePen

[When Using The 'Scrub' Property On A ScrollTrigger, Is The Ease Function Still Used?]

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

[ScrollTrigger Different Instances Of The Same CSS Class Individually]

Thanks Zach. That's fabulous.

 

[ScrollTrigger Different Instances Of The Same CSS Class Individually]

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

 

 

See the Pen gOPrGOV by emilychews (@emilychews) on CodePen

[Scrub Then Pin Tween From Last Point In Scrub]

Thanks Mikel

[Scrub Then Pin Tween From Last Point In Scrub]

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.

 

 

 

See the Pen yLeeaGb by emilychews (@emilychews) on CodePen

[ScrollTrigger Not Working When Used On An Allocated Timeline]

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

 

See the Pen PoZYYLM by emilychews (@emilychews) on CodePen

[Animate <feTurbulence> SVG filter]

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).

[Animate <feTurbulence> SVG filter]

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.

 

 

See the Pen oOePNb by emilychews (@emilychews) on CodePen