Leaderboard

Hello @Adam Wright and Welcome to the GreenSock Forum! Here is a link to the TweenMax from() Docs: https://greensock.com/docs/TweenMax/static.from() So the from() method has 3 parameters.. specifically the target parameter: TweenMax.from( target, duration, vars ) The target parameter 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(). So just like @Visual-Q advised jQuery is not required. But keep in mind if using the load event you want to stay away from the onload event and use addEventListener("load") instead, since the window.onload event can wipe out previously binded load events on the window object. Here is a quick way to make sure you only run your GSAP code after the window is fully loaded and the DOM is fully ready. Below you will see that I first make sure the DOM is ready, and then check if the window is loaded. This makes sure that the HTML or SVG markup is fully ready and that the window is checked within that DOM ready event handler. That is a great cross browser solution. The reason being is that sometimes the window event can fire before your DOM is ready or vice versa. That happens due to slow networks and connectivity. This makes sure that the window event fires, even if it it fires before or after the DOM is ready. So if the window load fires after the DOM ready.. it will fire as expected. If the window fires before the DOM is ready, it will wait and fire immediately after the DOM ready event. So this way you cover your bases The Vanilla JS way: // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until images, links, fonts, stylesheets, scripts, and other media assets are loaded window.addEventListener("load", function() { // GSAP custom code goes here }, false); }); The jQuery way: // wait until DOM is ready $(document).ready(function() { // wait until images, links, fonts, stylesheets, scripts, and other media assets are loaded $(window).bind("load", function() { // GSAP custom code goes here }); }); Happy Tweening

You don't need jQuery for gsap and your script isn't using it as presented. jQuery is required for some bootstrap elements however - see link, if you're using it with gsap it would have to be loaded before gsap. https://www.w3schools.com/bootstrap/bootstrap_get_started.asp To wait for assets to load before starting animation you can wrap them in a load event. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload Some info on jQuery document ready and jquery load: https://coderwall.com/p/_jothq/jquery-when-to-use-document-ready-and-when-window-load I don't use bootstrap studio but it look like the interface allows you to import and set the order of your js scripts: https://bootstrapstudio.io/tutorials/changing-file-include-order-js

Yes @OSUblake is right the default z-index is auto. So in order to use z-index you must use either position (absolute, fixed, or relative), otherwise z-index will not be applied. z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index Happy Tweening!

I can't help you without a demo, but this has nothing to do with GSAP. Please read about the stacking context. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Sorry I misread I thought you were talking only about the white edge on the left I updated to take care of both issues. body{margin:0; overflow-x: hidden}

I don't know if it suits your needs but you could animate the wrapper size with a few tweaks to your css instead of using an overlay. https://codepen.io/Visual-Q/pen/MMwJeO

var tl = TweenMax; $('.move').click(function(){ tl.to('.nav-content,.menu-mark-container', 0.5, {x: "500%", ease: Expo.easeInOut}); }); Or give them a common class and animate that <div class="animate nav-content"></div> <div class="animate menu-mark-container"></div> <button class="move">move</button> var tl = TweenMax; $('.move').click(function(){ tl.to('.animate', 0.5, {x: "500%", ease: Expo.easeInOut}); });

I completely understand your question. The problem has to do with the positioning and z-index of some of your elements. Make a simple demo and I will show you. It's a CSS issue. This question has been asked more than once, like here.

Just delete the duration of 90% in your scene parameters and then the actual tween duration will be used. Happy tweening.

@OSUblake has a cool demo here that should point you in the right direction. https://codepen.io/osublake/pen/dYVNYd Happy tweening.

@Jean-Tilapin just passing by here.. I think your issue is in the loop, you're targeting all "hexagon-inner" elements collection, instead of only those that belong to the "grid-line" that you're looping, and also the start position can be set to 0. This should work? test.staggerTo($(line).find(".hexagon-inner"), 0.5, {rotationY:'180'}, 0.2, 0);

You forgot about number 3 that @OSUblake advised which is: 3) add a new stacking context On what element you ask and how? .. That's a great question! If you create a limited codepen demo example we can see see how it can solve your issue when we see your code live and in an editable environment to better help you. Thanks and Happy Tweening

@Visual-Q @Jonathan Thank you guys for the quick reply ?. That information is much appreciated, Smashing! @Visual-Q the studio does allow you to order of the scripts, i was tinkering around with these but with no luck. I had been browsing articles in the forum about something similar and noticed a response about jquery and thought this maybe the problem somewhere along the lines. very grateful for the quick response and the information! Thankyou.

my 2 cents again)) @Jean-Tilapin First thing is you need to write your rotation values as relative instead of absolute, for ex "+=180", instead of 180, which means it will always add 180 on top of the current value. Second, as i far as i know from the docs, if you want to repeat your timeline but keep the final values, you can invalidate the timeline and restart it on completion, this way it forgets the recorded values. As for the delay between restarts, not sure about the best approach, but you could create a dummy tween with empty object after your animation. For ex.: var test = new TimelineMax({ onComplete: function(){test.invalidate().restart()}}); for(var i=0; i<nbLines; i++) { test .staggerTo($(".grid-line:eq(" + i + ") .hexagon-inner"), 1, {rotationY:'+=180', ease: Circ.easeOut}, 0.1, 0) .to({}, 3, {}) }

I think this thread can help you: Just FYI — simple demos are best. We don't need all the actual assets. Just a few divs and enough code to demonstrate the problem. Thanks.

Make sure that if the border is 1px and using box-sizing: content-box; you are accounting for the extra pixels in the border. So if the ad is 300x250 then the container/wrapper div will have width: 298px; and height:248px;

Works at my end. I'm not seeing any white edge on the pen. https://codepen.io/Visual-Q/pen/xoGdGd

Remove the margin on the body in css add body{margin:0}

Yeah, this is really a ScrollMagic question and we need to keep the focus on GSAP. Their support area is here: https://github.com/janpaepke/ScrollMagic/issues Premium support: https://support.scrollmagic.io/ That being said, here is a fork of my demo from the other thread you listed. I've just added a new scene to animate the body background color as you scroll through the panels. It should get you started. https://codepen.io/PointC/pen/EBjKEb Happy tweening.

Hi @sportserh, Welcome to the GreenSock Forum. Although not a GSAP topic ... that's how it could work: https://codepen.io/mikeK/pen/pXJJaE Best regards Mikel

Oh ! Thank you Anya ! You saved my day ! The "repeatDelay" function doesn't seem to work with that code. There might be a way to add a delay somewhere, I'll figure it out (the dummy line doesn't seem to have an effect). Thanks again ! Edit : var test = new TimelineMax({ onComplete: function(){test.invalidate().restart()}}); test .to('.logo-container', 5, {x:0}); for(var i=0; i<nbLines; i++) { test .staggerTo($(".grid-line:eq(" + i + ") .hexagon-inner"), 1, {rotationY:'-=180', ease: Circ.easeOut}, 0.1, 0) } It works like this. Thanks everyone. Great forum, as always

Hello @Jean-Tilapin and welcome to the GreenSock Forum! You will get faster replies if you please create a limited codepen demo example. Since it will be hard to help you without seeing your code live and in context. Here is a video tut on how to create a codepen demo example. Thanks

Yes, GSAP searches the "vars" object for function-based values. However, the duration isn't in the vars object - it's a standalone parameter. "cycle" was originally intended to cycle through a set of values (as the page @mikel referred to explains) but then we added features to it to accommodate function-based values too. That pre-dated function-based values in the regular "vars" object. I'm working on GSAP 3.0 and I'll definitely make duration accommodate function-based values. Don't worry. I'm pretty excited about 3.0. It'll be several months before it's ready, though. For now, I'd recommend just using cycle.

Hi @dee If the error is coming from custom.min.js on Line 118, you should go to that line number in that file. Then you can narrow down what triggered that error

Just use box-sizing: border-box; to keep the borders within the boundaries of the main ad container. Regarding your second question, ads can be served with transparent backgrounds, so it's always good to have a background color or image, even if you want the background to be plain white.