Mr. Creative

No thats the whole point is that I want an animation in the iFrame to trigger and react to the scrolling on the main body of the page it is in. Like I said above "The animation only scroll triggers when hovered over the iframe because of this." Desired effect - as you scroll down the page and the ad comes into view, this trigger animations with scroll magic that can then be reversed as you scroll back up the page.

The ad test page https://interactive.partnerscreative.com/banners/TEST/adpage/ The ad link itself to see how the animation works. https://interactive.partnerscreative.com/banners/TEST/test/test.html On this test page we made, we have embedded an iframe with a link to an "ad" we have made that is using a GSAP animation triggered via ScrollMagic. I have seen a few other posts on the forum here about getting outside of an iframe and whatnot, however we wont have access outside of our own html once the ad is served in the wild. The animation only scroll triggers when hovered over the iframe because of this. How can we trigger the scroll animation based on scrolling without a cross origin request?

That didn't do anything. I am actually loading gsap locally for this project so this was not the issue but I did update it on the codepen.

I cannot seem to figure this one out. I can only seem to explain this by walking through the user steps of how the functionality works. Step1 - User clicks on "alert" button and an overlay on another button gets set to display block. Step2 - User thinks they are clicking on the button for "alert" and "perimeter" button that activates the animation, however they are actually clicking on the overlay. Step3 - Animation is triggered - the alert svg animates in via opacity and scale and then is set to repeat -1 and yoyo true Step4 - User then clicks on the opposite button, "Perimeter" in this case, and the animation stops and disappears. Step5 - Same as step2 Step6 - Same as step3 This is where it breaks and the yoyo and repeat ease gets super out of whack. It keeps on getting more crazy as you continuously repeat steps 4, 5 and 6. How do I reset my animation after the .addPause() and .add("exit") so that it actually does reset and wait until the animation is triggered again? I have tried KillTweensOf, .reversed(true).progress(0), and a few others but can't seem to make this happen. Thanks for the help! I abbreviated my code for ease of understanding FYI - The svg is displaying weird in Firefox but looks fine in chrome. Not sure the issue.

@Carl - thanks for the clarification! Everything is working now. As far as weight savings, I agree - and we're shipping to production with TweenMax.min currently. No reason to do anything else, until you get to the final stages of optimizing. Those little savings all add up PS - Thanks for the autoAlpha tip - I had forgotten that it existed!

I am refactoring and running cleanup on a production app, and optimizing dependencies. We have a React component that uses GSAP for some transition-related stuff, but only the TimelineLite library. It's all simple stuff, without any eases or anything, so we have no need for any of the more complex GSAP items and can now scrub them out to optimize. Originally, we just imported the whole GSAP library via NPM like so: import 'gsap'; Per the GSAP npm docs (https://www.npmjs.com/package/gsap)... Now, I'd like to trim the fat off our import, and switched to: import { TimelineLite } from 'gsap'; However, this is compiling correctly but throwing the following client-side error: Uncaught TypeError: _gsap.TimelineLite is not a constructor Does anyone know why this is? Our weight savings from importing `TimelineLite` alone aren't huge, but they are worth doing. Do I need to import other parts of the GSAP libraries specifically? ---------- NOTES: I have also tried this with no luck. import { TweenLite, TimelineLite } from 'gsap'; Strangely, this does not work either: import { TweenMax, TimelineLite } from 'gsap'; but this does (for obvious reasons): import { TweenMax } from 'gsap'; Here is the animation we are using, super basic: new TimelineLite() .to('#urlCopyMessage', 0, { visibility: 'visible', opacity: 1 }) .fromTo('#urlCopyMessage', 0.35, { opacity: 0, y: 20 }, { opacity: 1, y: -30 } ) .to('#urlCopyMessage', 0.35, { opacity: 0, delay: 0.25 } ) .to('#urlCopyMessage', 0, { visibility: 'hidden' });