Visual-Q

You might want to start a new post for this as it attached to a very old one. As far as the issue goes it suggests that something is causing the text to change and reflow after document ready which I presume is what you mean by ready. It's generally better to setup animation after window.onload that way all elements should be loaded, also make sure that the splittext script runs after any other scripts that may affect the text or any containers it might be in. Without a working example it's kind of impossible to diagnose further.

It seems a reasonably efficient implementation for scrollMagic as long as you're using only full height panels. It really hinges on scrollMagic performing reliably across devices and browsers, that you'll have to test.

Unfortunately I haven't used IntersectionObserver before and I can't read ES6 worth a crap otherwise I'd try and jump in. MDN looks like it has a pretty good walkthrough for setting them up: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

While it doesn't fix it I think it should be new IntersectionObserver you had Obserber

You need to add the gsap scrollTo plugin https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/ScrollToPlugin.min.js and while it's not necessary in this case as you're calling gsap in callback function you might want to add scrollMagic gsap plugin if you ever want use setTween anywhere https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.js Seems to work now. https://codepen.io/Visual-Q/pen/YbQqvN

I guess i'm a glutton for punishment and I couldn't help playing with this. I found that pins really threw a wrench in things as far as trying to setup triggers for panel scrolling so I separated that part into a separate wheel event. I'm sure there's a way to make it work all in scrollMagic but I"M NOT FIGURING IT OUT!? I did figure out what i thought was one kind of cool thing - using a flag variable and onComplete to make the wheel event/Tween self throttling. https://codepen.io/Visual-Q/pen/eaWeLv

For alignment issue try setting the width of .section,footer to 100% not 100vw. Counter to all logic browsers include scroll bars in vw calculation, which really sucks. Someone may choose to come in to help here but this really is mainly a scrollMagic issue so it may be best to take it to their forum. Our aim here is to focus on gsap issues.

Looking at the plugin's promo page it looks like they've made a GUI for setting everything up it but it doesn't appear to offer any information about adding your own code. I would suggest you ask the author of the plugin.

var div = document.getElementById("square"); var frame_1_in = new TimelineMax() if(div){frame_1_in .from(div, 10, {x:"+250",ease: 'Power2.easeOut'}, 0.5) .fromTo(div, 2, {autoAlpha: 0},{autoAlpha: 0.2},"-=10"); }; div.addEventListener("click", function(){ frame_1_in.restart(); }) You should probably just put the autoAlpha on a second separate tween that runs for 2 sec.

As long as the variable holding the timeline is a global or at least is scopable to scrollMagic it's values can be defined/redefined in the media function and it should be accessible to scrollMagic's methods.

I am appropriately prostrated awaiting wisdom.

I have a followup question for this: Pedros more elegant solution sets the timeline once and clears it to add new methods. Mine just writes a new timeline on the variable. Is there any difference between the two as far as garbage collection goes, i.e. if you just overwrite the timeline on the variable is the original timeline and it's children wiped out or are they still kicking around hogging resources? // Define timeline once and clear timeline each time var timeline = new TimelineMax(); //set timeline properties timeline.addMethods //reset timeline properties timeline .clear() .addNewMethods // Define New timeline each time //set timeline properties section1MTl = new TimelineMax() .addMethods //reset timeline properties section1MTl = new TimelineMax() .addMethods

I was playing with this and came up with almost the same solution as @Dipscom though mine just overwrites the timelines instead of clearing them. The main takeaway from both examples is I think get the scroll magic scenes out of the mediaQuery function and only define them once, only the properties of the timelines need to be redefined on resize. You can also put all the timelines in a single media function in this case. https://codepen.io/Visual-Q/pen/OYWXjV

You could use an onComplete callback on the timelines with a console log telling you timeline 1 ran, timeline 2 ran etc... this could tell you if the expected timeline is running or not.

The what of it is that visibility hidden is remaining on the objects, so I am guessing it's getting stuck on autoAlpha0. I haven't investigated far enough to figure out the why. I don't have the time right now to figure out how this is all supposed to work but here's a shot in the dark you are defining scrollMagic scenes in each media query fired function. Once these scenes are defined however I think they run on their own which means they may be confilcting with one another.

An extension to the previous pen... In typical fashion around here, one thing leads to another and gets completely off the original topic. Extending Craig's elegant x: window.innerWidth I think I might have come up with a fairly decent option for making transform based animations responsive. It basically uses the parent element as a stage and modifier to animate relative to it. https://codepen.io/Visual-Q/pen/XwXQGV

Very elegant Craig... a thought on how to make it responsive. https://codepen.io/Visual-Q/pen/byEZqK

3000 Craig Sprites! You realize there's no way I can ever unsee that now.?

An interesting question i doubt it could do it natively. Maybe this will help: https://www.ispringsolutions.com/blog/how-to-embed-an-iframe-in-a-powerpoint-presentation

I added a condition to the to the scrollMagic function that prevents the scrollMagic tweens from running if the link scroll is running. Seems to work. https://codepen.io/Visual-Q/pen/NVqYrm

DOH!

I'm not seeing any animation in the iframe in your link to evaluate it? There's several things that might cause something like this happen but we would need to observe it in action to provide any suggestions. Also if possible it's best to create it in a codepen to help us better diagnose. On that note as well codepen embeds content in an iframe, you could also inspect their settings for a solution. UPDATE: I see Carl beat me to it, but I'm not seeing anything in the iframe on my machine???

Yeah it's kind of hard to determine the issue since I can't see it on my machine. Blake made a smooth scroller awhile back that might be worth looking at for inspiration.

I tried it high up on the inheritance chain on the body and it breaks the slider however you can set direction: rtl; in the css for text block items and it seems to work fine, note you'll have to remove text-align:center.

And it's also worth noting that iE11 doesn't support it and Edge support is only partial, so depending on your needs it may not be a good option at this time.