Jonathan

Hi @Tompy and Welcome to the GreenSock Forum! I'm glad you got it sorted, let us know if you have any additional help. Happy Tweening!

Hello @harp30 and Welcome to the GreenSock Forum! To do that you can use the GSAP Modifiers Plugin to create a seamless/infinite loop of your elements movement. https://greensock.com/docs/Plugins/ModifiersPlugin Here is codepen that use this concept horizontally, but can be used for vertical by using y instead of x: I hope this helps, Happy Tweening

Hello @Jimmi Heiserman, To detect when an element is visible in the viewport you can try and use the HTML5 Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Happy Tweening!

Brilliant .. i love how Bansky keeps sticking it to the art establishment

Hello @mattchaptr and Welcome to the GreenSock Forum! It looks like whats is happening is that for some reason when scrolling there is a body class being added to the body tag adding the class lock-scroll which has a CSS property overflow: hidden. Then it removes the scrollbars and adds it again and then removes it again, all within a second upon first scrolling. That is why it does the side ways jank jiggle In your style.css .. on line 1 since i believe the file is minified, so you will need to find what is adding the below CSS in your code when scrolling. / * this is being added by your code when you begin scrolling, causing that jiggle jank */ body.lock-scroll { overflow: hidden; } Let us know if you find what is adding that overflow hidden .lock-scroll class on the body class ? :)

Hi @Tompy and Welcome to the GreenSock forum! I tested your codepen in latest Firefox (62.0.3) and Chrome (69) on Windows 10. I could not see a delay in any of the 3 animations. Are you seeing this on an Apple desktop or mobile device / computer? What OS and OS version are you seeing this on? What browser and browser version are you seeing this on? Any additional info will help us help you figure why your seeing this delay. Thanks

Hi @jungleD and welcome to the GreenSock Forum! Sorry your having trouble. Thank you for all the helpful information. To help speed up trying to find out what is going on. Can you please can create a reduced codepen demo example of this, it will help us to test in live editable environment so we can better see why this is happening. We would sure appreciate it: Thanks

Keep in mind @emilychews, that under the hood GSAP uses document.querySelectorAll() for the tween target parameter. So this way you just simply put your CSS selector in your tween target. This way you have less code to write tl.from(target, duration, vars); The target can accept a string also to put your CSS selector: tl.from(".page-1", 1, { y: 10, opacity: 0.3 }) Taken from the GSAP from() Docs: https://greensock.com/docs/TweenMax/static.from() target: Object Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll(). Happy Tweening

Hi again @emilychews If you try my above codepen again you should see its working, I guess codepen didn't save my pen correctly. You don't have to rework your code just wrap with if statement checking the length property or ... You can just have an if statement around the target element for your tween. If .page-1 exists that use that, if it doesn not exist then use .box-1 variable. Using ternary operator way: var page1; page1 = (page1.attributes.length === 0) ? document.getElementsByClassName("page-1")[0] : document.getElementsByClassName("box-1")[0]; tl. .from(page1, 1, { y: 10, opacity: 0.3 }, "start") Or using regular if statement block for better readability since ternary operator way is one long line. var page1 = document.getElementsByClassName("page-1")[0]; if (page1.attributes.length === 0) { // use .box-1 if .page-1 class does not exist page1 = document.getElementsByClassName("box-1")[0]; } tl. .from(page1, 1, { y: 10, opacity: 0.3 }, "start") Like this: Does that help

Hello @emilychews and Welcome to the GreenSock Forum! To make your code run on just the page you want without throwing that error when it doesn't exist... You can do this by checking the length of the page1 var is greater than zero which i have below, or even check that it doesn't equal zero: var page1 = document.getElementsByClassName("page-1")[0]; if (page1.attributes.length > 0) { // your gsap and other code goes here } And with all your code: Happy Tweening!

Hello @Friebel and welcome to the GreenSock Forum! I remember reading awhile ago that Safari will throttle down the RAF on cross-origin iframes content until they are interacted with. Maybe it also effects non cross-origin iframes as well. Maybe you can fake trigger an interaction event handler on the iframe when the page loads, but I'm just pulling at straw here. The browser might be treating that non interacted iframe as an inactive browser tab. When the browser tab is inactive the browser will automatically throttle down the requestAnmiationFrame (RAF). So that same logic would dictate that the iframe needs to be interacted with so it gains focus. But if its a cross-origin iframe than that is a security sandbox issue. Happy Tweening

Hello @hybreeder and welcome to the GreenSock Forum! For color mouse hover text color.. this should be as simple as just positioning your elements within the anchor tag with z-index. Forking @mikel codepen of your codepen. You should wrap your anchor tag (.tbtn) text with a <span> tag Give that span CSS position: relative and z-index: 2 .t_btn span { position: relative; z-index: 2; } <a href="javascript:void(0);" class="t_btn btn_bg t_btn_about"> <span>Hover me</span> <div class="hover_overlay"></div> </a> Then: give .hover_overlay a z-index of 1. (never use negative z-index like -1, since it doesn't work cross browser, only use positive z-index values) Happy Tweening!

Hello @frankallen and welcome to the GreenSock Forums! Are you seeing this in iOS Chrome or iOS Safari? Without an example like @Shaun Gorneau advised, it will be impossible to narrow down what is happening on a live site. It is hard to debug a live site without isolating just your GSAP code. Please create a reduced codepen demo example so we can test your code in a live editable environment to better help you. Thanks

Hello @benoit Can you please give us more details on what exactly you are trying to do. Its confusing since in your code it keeps replacing a child with the same exact <div> element with the same class and the same text value. Any reason why your doing that? All that will do is cause some layout thrashing of constantly trying to animate something that is affecting layout calculations for the same element. Also keep in mind that when animating transforms you should set the CSS position to absolute so it doesn't cause a reflow of the layout in the document flow. Any additional information will be helpful in letting us know how we can help you Resources: https://www.impressivewebs.com/absolute-position-css/ https://www.w3.org/TR/css-position-3/#abs-pos

Hello @webrhythm and Welcome to the GreenSock Forum! Here is an example of using the CSSRulePlugin with a GSAP timeline, using TimelineMax. Happy Tweening!

Hello @ivanguinea and Welcome to the GreenSock Forum! Be careful about using the <object> element, you will have many cross browser bugs and have to deal with random security issues for cross domain and cross origin policy shenanigans. Its better to just output your SVG markup without the <object> element and use other ways described in the post link @mikel pointed to. But that is just my two cent.

Hello @jsciumi and welcome to the GreenSock Forum! When i looked at the above codepen I could not see the exact issue you were describing. Where the "f" in "Transform" was filling in after the staggerTo was complete. I tested in latest Chrome and Firefox on Windows 10 but did not see this? What broswer and and OS did you see this in?

When i inspect Chrome, GSAP is indeed interpolating values for the svg filter. But Chrome isn't rendering anything, oh Chromernet Explorer 6

Hello @AntonKeller and welcome to the GreenSock Forum! Glad you got it working

It might be related to base64 images in Chrome which have various bugs when dealing with base64 images, along with being cross domain? So its probably related to some chrome shenanigans of them breaking things and then fixing them. Oh, and then them breaking it again.

Hello @zozo and welcome to the GreenSock Forum! The issue your seeing is happening because id #mask9 is a <line> element. It looks like your <line> element (#mask9) for the letter i, is causing this error to be thrown. You can see when i comment out the SVG <line> element (#mask9) and the from() tween for #mask9. The animation does not throw that error. I will shoot a message to the Mighty @Carl and Jack @GreenSock and see if they can see why that happens with that <line> element. Please standby

Hello @mb2233 and welcome to the GreenSock forum! Yes i ditto what @PointC just posted. Your performance issues can be a number of things, like what CSS properties are you animating? What do your tweens look like? But we can know right away if you provide a reduced codpen demo example. This way we can test your code in a live editable environment and see what is happening. Also: what browser and browser version did you see this on? what mobile device? what OS and OS version did you see this on? Happy Tweening

@Sahil that's weird.. I did notice that the first 3 codpens solved the box model layout fit of the text before and after the animation is reverted. But @Carlshowed me that once the nested div's are inserted and reverted, the "g" went back to the same line. My quirks mode has been a little buggy so i should have caught that sooner

Hello @Spacefuel and Welcome to the GreenSock forum! This will be hard to debug without seeing your code in a live editable environment like codepen. Can you please create a reduced codepen demo showing us your issue, so we can test it live? But below are examples of animating fegaussianblur using the GSAP AttrPlugin to animate the fegaussianblur svg attribute. Another example animating fegaussianblur And adding fegaussianblur on an image Happy Tweening!

Another 5th option is to add the following: #message div { white-space: nowrap; } It looks like the child div tags of #message are inheriting the CSS white-space property (from the browser stylesheet), which has the white-space property default of normal which always wraps. Hope this helps Resources: CSS white-space property: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space