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