Jump to content
Search Community

Cant seem to set the initial opacity + scale state of my elements

wondergryphon test
Moderator Tag

Go to solution Solved by Dipscom,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey guys

 

Sorry for no codepen demo as I'm working on a large website and couldn't just extract the bits for the sake of a demo. Hopefully the screenshots + gifs will suffice.

 

Scenario: I have a pinned section that sequentially shows + hides 2 elements as you scroll. When you scroll to the element initially, they should be hidden and then fade in and out again until the element is unpinned.

 

Problem: Both elements are initially visible and overlapping each other when the page first loads. If i scroll down the page and run through the animation, and then scroll back up again, the animation ONLY THEN works correctly. So it's as if the final state of the animation is setting it correctly, but I can't seem to set it up to do that from the get go.

 

Some Gifs:

The problem: http://i.imgur.com/QVPga7u.mp4

How it should be: http://i.imgur.com/0zKVUo8.mp4 (note this happens once I've scrolled down and then back to the top again)

 

The Javascript

TweenMax.set(".infographic-text-wrapper", { opacity: 0, scale: .9 }); // this has no effect

var controller = new ScrollMagic.Controller();

// tween
var tween = new TimelineMax()
  .fromTo('.infographic-text-wrapper-1', 1, { opacity: 0, scale: .9 }, { opacity: 1, scale: 1 })
  .fromTo('.infographic-text-wrapper-1', 1, { opacity: 1, scale: 1 }, { opacity: 0, scale: .9 })
  .fromTo('.infographic-text-wrapper-2', 1, { opacity: 0, scale: .9 }, { opacity: 1, scale: 1 })
  .fromTo('.infographic-text-wrapper-2', 1, { opacity: 1, scale: 1 }, { opacity: 0, scale: .9 })


// scene
var scene = new ScrollMagic.Scene({ triggerElement: "#what-we-offer", triggerHook: 'onLeave', triggerOffset: 800, duration: 3000, offset: -150 })
  .setPin("#what-we-offer")
  .setTween(tween)
  .addTo(controller);

The CSS

 

And then the CSS used to set the initial state (although this doesn't seem to have any effect)

.infographic-text-wrapper {
	position: absolute;
	top: 0;
	left: 0;

	opacity: 0;
	transform:scale(.9);
}

Final note is that I have tried the suggestions on this page, but to no avail.

 

So frustrated and the lack of google search results on the page mean I'm probably being really stupid, but at this point I would welcome any help I can get... 

Link to comment
Share on other sites

Hi wondergryphon,

 

Welcome to the forums!

 

Without a demo all we're doing here is guesswork, which may or may not work. You really don't need to reproduce the whole project to show us, only really the bit that you are having difficulties. In this case, a simple fixed bar with the two elements and a scroll trigger would have been enough. In fact, the simpler the demo, the better for us and the more likely you will spot any mistakes made.

 

I will assume everything else has been set correctly, the following is how I would have set the timeline if I were trying to set a crossfade between two elements. It's better to use autoAlpha over opacity. It will toggle visibility as well as change the opacity.

// Timeline
var tween = new TimelineMax()
.add(TweenMax.from('.infographic-text-wrapper-1', 1, { autoAlpha: 0, scale: .9, repeat:1, yoyo:true, repeatDelay:1 }) )
.add(TweenMax.from('.infographic-text-wrapper-2', 1, { autoAlpha: 0, scale: .9, repeat:1, yoyo:true, repeatDelay:1 }) )

In the CSS, you can remove the opacity and scale.

infographic-text-wrapper {
    position: absolute;
    top: 0;
    left: 0;

    /*opacity: 0;
    transform:scale(.9);*/
}

However, I don't think the issue is in the code itself but when the code is being run. Again, seeing the issue in a live environment would make thing clearer but here, I'll have to hazard a guess.

 

You are creating this on the fly, when the page loads or when the trigger anchor is reached. If that's the case, there will be a brief moment where GSAP is taking over the element and setting up the animation. That's why you see it work after you scroll the page down and then up again. Maybe if you create the animation before you reach the trigger point and have it paused will solve your issue.

 

Hopefully it is as simple as that. If it doesn't help, we really ask for a reduced-case example that shows the issue you are having. 

 

Happy Tweening!

Link to comment
Share on other sites

Thanks so much @Dipscom. 

 

I was busy playing with a `staggerTo` when I saw your reply - which has gotten me closer than I've been all morning, so thanks for that :)

 

Only adjustment that's needed, is a bit of an overlap (which is why I was looking at stagger). IE that as the first element is fading out, the next element is already fading in so there's a period where both are visible.

 

Is that possible with your method, or would the stagger function be better?

Link to comment
Share on other sites

  • Solution

Personally I would go with an negative relative position parameter to create the overlap, that'll be more flexible than the stagger and will suit your situation better as you want the user to have a moment to read the text.

var tween = new TimelineMax()
.add(TweenMax.from('.infographic-text-wrapper-1', 1, { autoAlpha: 0, scale: .9, repeat:1, yoyo:true, repeatDelay:1 }) )
.add(TweenMax.from('.infographic-text-wrapper-2', 1, { autoAlpha: 0, scale: .9, repeat:1, yoyo:true, repeatDelay:1 }), "-=0.3" )
  • Like 3
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.
×
×
  • Create New...