Jonathan

Hello @notgettingstabbed and Welcome to the GreenSock Forum! First off love your forum handle, very funny. Glad you figured it out. Just a handy rule of thumb. Its best practice not to use any negative z-index, since it will cause you cross browser shenanigans due to stacking context of transforms and how z-depth works, aka z-index. You should never go past a value of 0, using z-index: 0 as your most bottom layer. Happy Tweening

Its a little tricky to have width and or scaleX be added after the words go up since those properties are whats used to animate the non animated text (.c-intro-title__fixed-part) to stay centered. What you want, would require me to re-layout how the markup and initial CSS is so it can use other ways to animate the centered text so its responsive. But when i have more time i can try and do that but im a little strapped for time right now. If it was me, I would first work out the auto centering animation of the h1.c-intro-title element. And then once that auto centers, work on animating its children with SplitText. Since the <h1> element is what needs to be animated to account for its children's width due to how you want to have no width or scaleX applied, until after the SplitText animates the y property (translateY).

Hi again The best way to get this solved faster is to create a limited reduced codepen demo using the CSSRulePlugin setup CSS, JS, and HTML. Then once you see it run correctly in codepen you will know that the issue is with your local react setup. Plus we can actually see some code with an animation to test live. But without seeing your code in a live editable environment we wont be able to see whats going on to help you better. You should also check out StackOverflow for CSS pseudo-elements and React: https://stackoverflow.com/questions/28269669/css-pseudo-elements-in-react/28269950 Thanks!

Thanks for posting your output error. What is the version of GSAP you are using in that bundle.js? Also what OS and OS version are you testing this on? :)

Just to piggy back on what Jack (@GreenSock) wrote. Have you tried running your GSAP code only after the DOM is ready/loaded (html document) and the window is loaded (all external assets are loaded). This will make sure you only run your code when the DOM is ready and the window is fully loaded. I never messed with REACT so i dont know how react loads or if it waits for DOM and window to be loaded before running your custom JS. For example this will make sure that the window and DOM are fully loaded even if the document or window fire before or after one another: // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until all external assets are loaded (media assets, images, css, js, fonts, etc) window.addEventListener("load", function (event) { // add custom GSAP code here }, false); });

Hi @Yashi-2 and Welcome to the GreenSock Forum! Make sure that your the CSS rule used in your getRule() method is the exact same CSS rule used in your CSS stylesheet. So since you have the following getRule() : getRule(".header__outer:after") your CSS stylesheet should also have the following: .header__outer:after { } Happy Tweeening!

Hello @mdo and Welcome to the GreenSock Forum! The issue is due to how the <span> element CSS display property works which defaults to inline, as well as how opacity works. Not to mention that the text is aligned to center. So since your using opacity: 0 that will just fade out but the element will still take up the same about of space in the DOM. So i added the CSS property display: "none" in the tween which will automatically add the display: none property after opacity reaches 0. GSAP is smart enough to do that I changed opacity with GSAP special property autoAlpha for better performance (See below for more info). Along with adding the CSS width property so it can be smoother. I also added autoRound: false so width can animate on a sub-pixel level instead of round whole numbers. Of course there could be more done to try and animate the static non SplitText text separately and in sync with the SplitText text. But hopefully this all makes sense: Keep in mind that i changed opacity to autoAlpha for better performance. See CSSPlugin Docs on what autoAlpha is. https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha autoAlpha: Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. //fade out and set visibility:hidden TweenLite.to(element, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenLite.to(element, 2, {autoAlpha:1, delay:2}); Happy Tweening

Hi @espeigeltmsw and Welcome to the GreenSock forum! I tried to pull up your codesandbox.io link from above but the browser tab kept spinning and would not load fully. Looks like your using canvas in that codesandbox link whereas the codepen one your trying to port over is CSS transforms and DOM. Based on the canvas context your using it is 2d. So z (translateZ) property does not exist for you to animate: const ctx = canvasNode.getContext("2d"); Keep in mind for canvas, that it is basically 2D not 3D, and will only support translate, rotate, scale, and skew. But z (translateZ) is part of the 3D context webgl (see this link) if using a canvas 3D context. It is possible to mimic a 3D effect with canvas but it relies on heavy math to calculate that. For canvas that is 3D you have to look into WebGL.

Hi @Whitby and Welcome to the GreenSock Forum! To do this you need to have the to() tween in a for loop and use let instead of var so you can iterate DOM elements in the loop properly. function numberWithCommas(n) { var parts=n.toString().split("."); return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); } var endingCounterVar = [2100, 1000, 1500, 1800]; for (let i = 0; i <= 3; i++) { let counter = { var: 0 }; let tal = document.getElementById("tal-"+i); TweenMax.to(counter, 5, { var: endingCounterVar[i], onUpdate: function () { let nwc = numberWithCommas(counter.var); tal.innerHTML = nwc; }, ease:Circ.easeOut }); } Differences between using Javascript let vs var in the below codepen example (better to view on codepen with console to see output): Happy Tweening

Hello @RolandSoos Just a thought, just so you can rule out codepen's website causing any shenanigans try running your codepen in Debug mode. Debug mode runs your codepen without an iframe, unlike with Edit and Full modes which display your code within an iframe. To use Codepen's Debug mode with no iframe, in your codepen url change /pen/ to /debug/. https://codepen.io/anon/debug/vvdqEm See if it still has that issue, this way you can rule out codepen's nested iframes as causing your issue. Happy Tweening !

Hello @SaidOurhou Sorry your having issues. You will get a better smooth scroll by just binding an event to the scroll event instead of mousewheel event. The mousewheel event can be inconsistent since its still non standard and experimental (see mousewheel docs). For a nice smooth scroll effect you can look at this post topic: Also with scroll events you might want to look into throttling and debouncing for scrolling events to prevent jank (lost frames choppiness) and get smooth silkiness. Since your code will be firing an insane amount of times due to how the scroll event fires. https://www.html5rocks.com/en/tutorials/speed/animations/ https://css-tricks.com/debouncing-throttling-explained-examples/ Happy Tweening

Hello @Lacika1981 and Welcome to the GreenSock Forum! Sorry your having issues. Can you please create a reduced codepen demo example so we can see your code in action to test properly? This way we can test in a live editable site to better help you and see exactly what is happening. Thank You

Yes, it looks like @mikel already advised what i would have.. to use z-index to control the stacking of the active pages. Some resources: CSS z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index Understanding CSS z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index The Stacking Context: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context Happy Tweening or Flipping!

Hello @namisuki and Welcome to the GreenSock Forum! To make an image slider it would have many parts. As far as the flip swinging door effect, here is an example of doing that in GSAP. It uses a mouseenter / mouseleave event, but the event can be changed to click. But it will show you the HTML markup and CSS used to setup a swinging door effect, and animating the CSS rotationY (rotateY) property. Happy Tweening !

Hello @wcomp and welcome to the GreenSock Forum! It looks like this is happening due to something in your SVG Markup. I could only see this in Chrome, but not in Firefox on Windows 10. I took your SVG code and pasted it inside a free online SVG Optimizer Clean Up tool. https://jakearchibald.github.io/svgomg/ I made sure i toggled off Clean Id's so it kept your ID attributes on your <g> tags inside your SVG. So now when testing in a webkit browser you do not see the border shenanigans after animating. The border was being caused by some coordinates that were causing an overflow of your path. But that online tool cleans it up now You can see in this below codepen that it no longer has that red border on the outside parts of the SVG. Does that help? SVG resources: - https://greensock.com/svg-tips Happy Tweening!

When i go to that website link you provided I get an error in the console: ReferenceError: $owl is not defined 2443da7113af4abb37536a668c4fc92d.js line 25

hi @franklylate, and Welcome to the GreenSock Forum! You really don't need the add() method for what your doing. The add() method is best used when adding child tweens or timelines to a master timeline. In a loop would look like this // tweens in a for loop var count = 32; for (var i = 0; i < count; i++) { introaniTL.from("div.tilecontainer img:nth-child("+i+")", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18), }, "tg"); } Please take a look at this CSSTricks article by the Mighty @Carl on Writing Smarter Animation Code and using the add() method: https://css-tricks.com/writing-smarter-animation-code/ Also since your using from() tweens, you will find this tut helpful when using any from tween like from(), fromTo(), staggerFrom(), or staggerFromTo() : Happy Tweening!

Hi @elpeyotl and welcome to the GreenSock Forum!~ Sorry your having issues. Based on your above codepen example i see that it is throwing a error on a script being loaded in, es.promise.js. Maybe its a codepen permissions issue? I didn't see any undefined variables in the codepen due to that script loading an error. Unhandled promise rejection FirebaseError: "Missing or insufficient permissions." es6.promise.js:97 08:50:50.811 Unhandled promise rejection FirebaseError: "Missing or insufficient permissions." e https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:412535 openStream https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:497518 f https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:496766 Ab https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1175938 dispatchEvent https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1203470 Ca https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1219538 Oa https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1217188 dd https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1185311 ed https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1184627 ad https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1184022 Sa https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1206393 nb https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1206350 Ab https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1175938 dispatchEvent https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1203470 ve https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1191916 jb https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1213667 Na https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1213639 es6.promise.js:97 To just output variable of getBoundingClientRect() width, then use this: var iconBoxRect = iconBox.getBoundingClientRect(); console.log(iconBoxRect.width); Happy Tweening

Hi @selfishound and Welcome to the GreenSock Forum! Sorry your having issues! To add to all the helpful advice given above When i look at your SVG markup in the HTML panel, it looks malformed, its missing the ending </svg> tag. You will notice after the </filter> ending tag there is no ending <svg> tag. Some browsers can render your code wrong when it is malformed, and cause some havoc when rendered. You should run your SVG code in an online svg optimizer to make sure its optimized and clean from uneeded whitespace. Online SVG Optimizer and Cleanup tool: https://jakearchibald.github.io/svgomg/ Also you might want to place your <filter> tag inside an SVG <defs> tag. SVG <defs> element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs <defs> <filter id="logo-f"> <feGaussianBlur id="logo-blur" in="SourceGraphic" stdDeviation="0"/> </filter> </defs> Here are some examples of animating SVG filter blur using GSAP: And this other one animating SVG filter blur: And then there is also animating CSS filter blur property examples: And this other using GSAP to animate CSS filter blur property with the GSAP SplitTextPlugin . Just my 2 cents, hope this helps

Hi @RolandSoos Sorry your having this issue! Have you tried to run your codepen in debug mode instead of in edit or full mode. The reason being is because edit and full mode run in an iframe. Whereas debug mode runs without an iframe. I frames can cause issues with browser console and the javascript parser. In your codepen URL change /pen/ to /debug/ and check the console and see if you see it fire twice. Like this /pen/ to /debug/ : https://codepen.io/anon/debug/ZmVoXQ See if that helps, this way we can rule out if codepen is causing an issue with GSDevTools? Thanks and Happy Tweening

Hello @mandooraj and Welcome to the GreenSock Forum! Thank you for sharing your GSAP project. The demos look great Happy Tweening

Hello @tri.truong and Welcome to the GreenSock Forum! I couldn't load your website link in Firefox on Windows 10. But GSAP does have a auto scroll plugin called ScrollToPlugin. https://greensock.com/docs/Plugins/ScrollToPlugin It allows you to do the following To scroll the window to a particular position To scroll to the element with the ID "#someID" To tween the content of a div To scroll when define an x (translateX) or y (translateY) value or both Some codepens of this: And this: There is also the GSAP tweenTo() method tweenTo() : https://greensock.com/docs/TimelineMax/tweenTo() .tweenTo( position:*, vars:Object ) Creates a linear tween that essentially scrubs the playhead to a particular time or label and then stops. If your still having issues please create a reduced codepen demo example so we can test your code live. Happy Tweening!

Hi again @Zokdok isActive() can work on a single tween, or a timeline. You can see in that codepen example that its using the tween variable that is referencing a single tween to check if its active (running) var tween = TweenLite.to(box, 2, {x:endX, ease:Linear.easeNone}); if(!tween.isActive()){ //only reverse the direction if the tween is not active // do something with tween } that could have happened when the site was migrated to a new forum system, sorry about the inconvenience for missing forum history. Happy Tweening!

Hello @Zokdok and Welcome to the GreenSock Forum! There are number of ways to detect if an animation, tweens, or timeline is running using the GSAP isActive() method. Found here in the GSAP Docs: .isActive( ) : https://greensock.com/docs/TimelineMax/isActive() .isActive( ) : Boolean Indicates whether or not the animation is currently active (meaning the virtual playhead is actively moving across this instance's time span and it is not paused, nor are any of its ancestor timelines). So for example, if a tween is in the middle of tweening, it's active, but after it is finished (or before it begins), it is not active. If it is paused or if it is placed inside of a timeline that's paused (or if any of its ancestor timelines are paused), isActive() will return false. If the playhead is directly on top of the animation's start time (even if it hasn't rendered quite yet), that counts as "active". You may also check the TweenMax.progress() or TweenMax.totalProgress(), but those don't take into consideration the paused state or the position of the parent timeline's playhead. Example of usage: Hopefully that helps.. Happy Tweening!

Hello @Mike_king I understand you need help but we need to keep the posts clear of clutter from other topics. I see you already posted your new topic, that is good. But please try not to post messages for help from another topic inside another topic. This will clutter up this topic and make it hard for other community members looking for answers and seeing off topic questions. Thanks