Jump to content
GreenSock

Lee Probert

Timeline tween div element opacity

Recommended Posts

I have a `ScrollTrigger` animation that is running great to animate my `THREE` scene. But when I try to animate a standard `<div/>` element on the page from the same `Timeline` it does not work. Here's a code snippet:

let camera_anim = gsap.timeline();
        camera_anim.add('start')
        .to(this.camera.position, {
            x: targetPosition.x,
            y: targetPosition.y,
            z: targetPosition.z,
            ease: "power1.inOut",
            duration: 100,
            }, 'start')
        .to(this.intersectionPlane.position, {
            x: intersectionPointPosition.x,
            y: intersectionPointPosition.y,
            z: intersectionPointPosition.z,
            ease: "power1.inOut",
            duration: 100,
            }, 'start')
        .to(this.planeBackgroundMaterial, {
            opacity: 0,
            ease: "power1.inOut",
            duration: 30,
            }, 70)
        .to(document.getElementById("header-copy"), {
            css: {opacity: 1},
            opacity: 1,
            alpha: 1,
            autoAlpha: 1,
            ease: "power1.inOut",
            duration: 30,
            }, 70);

        ScrollTrigger.create({
                trigger: ".section-header",
                pin: true,   // pin the trigger element while active
                start: "top top", // when the top of the trigger hits the top of the viewport
                end: "+=500", // end after scrolling 500px beyond the start
                scrub: 1,
                animation: camera_anim,
            });

The last element of the `Timeline` is the `<div/>` element. It has a `css` style with `opacity` set to `0` and I just want to fade it in as part of the `ScrollTrigger` - as you can see, I have tried different flavours of opacity tween but none of them work.

 Have also tried `document.getElementById("header-copy")` as well as just ".header-copy", which is the class name.

 

Anything odd about the code?

 

Link to comment
Share on other sites

Hey there!

 

There's a few things!

 

You're saying you've tried getElementById and .header-copy - those are targeting two different things. Does your element have a class or an ID or both?

Alpha isn't a valid property, also your durations are very long - 100 seconds? 30 seconds? Did you mean 10 and 3?

Here's a working example. Maybe extrapolate from here?

See the Pen zYWrdmJ by GreenSock (@GreenSock) on CodePen


 

Link to comment
Share on other sites

You are right that I was targeting an ID and I corrected this and can confirm that the element was found. I tried variations of `alpha`, `opacity`, and `css:{opacity}` but none of them worked. The durations are percentages of the `ScrollTrigger` (this all works as expected). The only element of the `Timeline` that isn't working is the `<div/>` bit. Everything else works fine.

Link to comment
Share on other sites

Thank you for the Codepen. I have also had success running a simple tween on the element but it is something about being a part of the `Timeline` that seems to be the problem.

Link to comment
Share on other sites

14 minutes ago, Lee Probert said:

I have also had success running a simple tween on the element but it is something about being a part of the `Timeline` that seems to be the problem.

It's virtually impossible to troubleshoot without seeing a minimal demo

 

You definitely don't need to wrap things in css:{}. And use either opacity or autoAlpha, not both (it doesn't make any sense to use both). 

 

Once we see a minimal demo that shows the issue, I'm sure we'll be able to offer some advice. 

Link to comment
Share on other sites

Just a thought: the element's CSS is inline. Is that going to override the tween settings on every frame of the animation?

Link to comment
Share on other sites

Here's the problem. It all works fine in Codepen. My project is part of a Wordpress PHP template so it is not easy to replicate what is happening. I'll keep chipping away to see if I can work out why it's not tweening the opacity.

Link to comment
Share on other sites

3 minutes ago, Lee Probert said:

Just a thought: the element's CSS is inline. Is that going to override the tween settings on every frame of the animation?

Nope, that's fine because GSAP sets inline styles for maximum specificity.

 

The only other thing I can think of is if maybe you accidentally killed the opacity animation? Like if after creating it, you did a DIFFERENT animation on that same element and set overwrite: true? I doubt it, but I'm just brainstorming.

 

I would recommend setting an onUpdate on that particular tween so you know when it's being updated, and then open up Dev Tools and scroll to where it should be animating opacity and look in the console to see if it's firing. 

.to("#header-copy", {
  onUpdate: () => console.log("updated!"),
  opacity: 1,
  ease: "power1.inOut",
  duration: 30,
}, 70);

And is the opacity sticking at 0 or is it at 1 the whole time? I wonder if maybe it was not 0 when the tween rendered the first time, thus it's animating from 1 to 1 (no change). 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×