Jump to content
GreenSock

Paz

autoAlpha issues

Recommended Posts

Hiya,

 

I've been working on this animation and have again issues with the autoAlpha. I basically have 3 blue tiles that should disappear on scrolling reverse (screenshot attached), but are still visible. 

 

It should be:

In Step 1 visible

In Step 2 they disappear

In Step 3 they appear

In Step 4 visible

 

I've tried many different ways but cannot make it work.  In my code they are commented as: // 3 blue tiles issue // "#tile6-2", "#tile4-2", "#tile8-2"

 

Also, I fist added durations to and between tweens, but then I realised that since it's a scroll animation the different 'steps' need to happen quite quickly. Is there any general advice for these kind of animations, so I can do things better next time?

 

Any help is appreciated!! 

 

Screenshot 2021-07-07 at 13.07.25.png

See the Pen oNWxoqm by mar-a (@mar-a) on CodePen

Link to comment
Share on other sites

I'm not sure I fully understand what you're after but I think you want something like this in the t12 timeline:

 

tl2
  .set(["#tile6-2", "#tile4-2", "#tile8-2"], { autoAlpha: 0 })
  .to(["#tile6-2", "#tile4-2", "#tile8-2"], { autoAlpha: 1 })

 

Link to comment
Share on other sites

2 hours ago, Visual-Q said:

I'm not sure I fully understand what you're after but I think you want something like this in the t12 timeline:

 


tl2
  .set(["#tile6-2", "#tile4-2", "#tile8-2"], { autoAlpha: 0 })
  .to(["#tile6-2", "#tile4-2", "#tile8-2"], { autoAlpha: 1 })

 

A slightly shorter version to write that: 

.fromTo("#tile6-2, #tile4-2, #tile8-2", { autoAlpha: 0 }, { autoAlpha: 1 })

👍

Link to comment
Share on other sites

Hi,

 

Thank you both for your help.  The fromTo seems a good option to use here. But I'm afraid I'll need to go through all the animations again. If I add the code suggested, I get unwanted effects on other timelines.  

 

Before I continue with this, I would greatly appreciate your opinion.

 

What I'm trying to achieve is that each Headline section triggers a timeline.  You can see an example here -down the page-: https://www.blendingpoint.com/about/

 

I can see that in that example the animations are shorter and abstract, whereas the ones I'm making are possible too long and with a narrative. e.g magnifying glass has to be visible on Step 2 only. So if people scroll down / up too fast the magnifying glass catches-up, and ends up being visible at other points of the scroll. Same with the faces or the lines at the end.

 

I know there's errors in my animation, but I'm unsure if my problem is in the errors I've made or in the design of the animation (too long for scrolling where you cannot control the speed used by the user). Any comments would be immensely appreciated.  

 

THANK YOU!

 

Link to comment
Share on other sites

You could get around this by adding scrub to your animations? Then no matter how fast the user scrolls the animations will happen synchronously.

Either that or add more space in to the design to allow for room to scroll.

See the Pen MWmeerp?editors=0010 by svganimationworkshop (@svganimationworkshop) on CodePen

  • Like 3
Link to comment
Share on other sites

Yeah, you're up against some logical impossibilities. If your user scrolls really fast and you don't have scrub, you're gonna have animations stacking up. You could force the previous/next ones to complete by using an onToggle, sorta like:

ScrollTrigger.create({
  trigger: "#step-2",
  start: "top center",
  animation: tl2,
  onToggle: self => {
    if (self.isActive) {
      tl1.progress(1); // previous should be at end
      tl3.progress(0); // next should be at start
    }
  }
});

 

  • Like 2
Link to comment
Share on other sites

@Cassie Yes I agree that would be the simplest solution, but the person who designed it doesn't like the option of having the animations paused mid-way.

 

@GreenSock Thanks for showing this option. I'll re-do the whole thing, give it another shot and see if it works. But agree it has logical impossibilities!

 

Thank you all for your time.

  • 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.
×