Leaderboard

For the situation where things are going wrong, we'd really need to see a simplified CodePen showing it going wrong. There are a lot of factors that could lead to this type of situation. Not much can be gleaned from a GIF. :/

Hi @emilychews You could do something like this: var tl1 = new TimelineMax({onComplete:function(){tl1.play("start")}}); You could also make the fade tween a stand-alone tween and then onComplete play the main timeline. There are lots of possibilities. Hopefully that helps. Happy tweening.

The problem is you're recreating the SplitText each time the waypoint is triggered. Create it once but trigger the Tween with the waypoint.

Maybe try animating top: 90% to top: 50% instead? The top CSS rule takes priority over bottom, so maybe there's some rule inheritance somewhere that messes things up... It's really hard to tell though. It looks like the div is animating to the position where it would be if it had position: relative, maybe that's worth investigating as well. Hard to provide any more help without a look at the code, like Shaun said.

Look at @Shaun Gorneau work with that shiny new Moderator Badge. Seven minutes from question post to answer. Nice work. Congratulations on the promotion. You've earned it. Now you'll have to test your quick-draw question answering speed skills against a super fast guy like @Sahil.

You're welcome. That's how we roll in the GreenSock neighborhood. Thank you for providing clear questions and simplified demos. It makes troubleshooting and answering questions so much easier and results in better answers for you and all the other community members. It's most appreciated. Happy tweening.

Hello @DevSaver Its best to create a reduced codepen example like @Carl advised. I am seeing various warnings and errors in the console: 11:16:51.352 Content Security Policy: Duplicate script-src directives detected. All but the first instance will be ignored. 11:16:51.386 Loading failed for the <script> with source “https://catalin.devsaverr.com/assets/js/index.php”. para-open.htm:15 11:16:51.388 Content Security Policy: The page’s settings blocked the loading of a resource at https://catalin.devsaverr.com/assets/js/index.php (“script-src 'none'”). Here is a video tut on how to create a limited codepen demo example: Then we will be able to help you solve your issue. Happy Tweening!

A quick and dirty way would be to put simple click targets in those positions and allow a click event to push the knob to those positions. A little CSS to position and hide ... and a little JS to update the draggable object. I'm sure a better method would be to use the Draggable's onClick method to get mouse coordinates and determine the click position relative to the knob and logic to determine the closest snap point. But for a few simple snap-to points, a couple of clickable elements might be what you're looking for. EDIT: Based on your positioning things ... you may want to look at this in CodePen itself ... seems some relative positions are causing the clickable elements to not align. EDIT 2: Reduced your pen down to simplify it for positioning.

@PointC Ah ha ha! Thanks man ... I just happened to see the post right away! @Sahil's quick-draw speed is legendary ... I don't think I'll compete with that! xD

In addition to the usual suspects of ScrollMagic and Waypoints, you may want to check out The Intersection Observer. It's come up in a few threads: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Hopefully those links give you some ideas. Happy tweening.

Hi @Chibie Welcome to the forum. As mentioned above, a demo will be necessary to get you the best answers. You said you could not replicate the issue in your demo. Does that mean you're seeing different results locally than you see in the demo? If the demo is working correctly, but your local version is not, I'm wondering if you may have some conflicting CSS transitions? Just a thought. We'll know more when we see a demo that shows the problem. Thanks and happy tweening.

Hi DevSaver, Sorry to hear you are having problems. The site you are linking to is loading literally hundreds of javascript and css files. Please provide a reduced test case that includes just a single tween of a single rule. If you can get a very simple example working then at least we know that a conflict is being caused elsewhere. If the simple example breaks, it will greatly speed up our ability to diagnose the problem. Thanks!

Hello @kreativzirkel Yes what i meant in that quote you quoted, is the progress (currentTime) of the video element, not the <progress> element. Above i did advise in the 2nd post that they could use an event using timeUpdate and then inside that addEventListener() event handler to update a <progress> bar. Also keep in mind that even through ScrollMagic uses GSAP as its main animation platform. That ScrollMagic is not made by GreenSock. I didn't have time to create a full blown example to animate progress element with video element. But you can see the 2 codepens below. One animates and aria-progressbar way. And the other animates a <progress> bar element. Even though this following cocdepen uses aria-progressbar its the same concept as animating a <progress> element. And here is animating a <progress> element with GSAP Happy Tweening!

Here is how you can snap on press. Check the comments in demo from following thread, it will explain how it works in details.

@Thanks PointC

I thought of testing performance, and created this demo. I don't see significant amount of drop in the performance on PC. On mobile though (Moto X Style and Chrome CPU throttling), you won't see drop for about 50 elements but for anything more than that your frames start dropping mainly because you are reading values from DOM on every frame. If you decide to optimize further and willing to complicate your code, you need to track your values on resize, scroll or whatever event that causes them to change. So if you don't read values from DOM on every frame then you get about ~50FPS performance for upto 100 elements and it starts dropping after that. So you should plan everything in a way that you won't need to use responsive tweens and use it for only scenarios where it is absolutely necessary.

Wow... really nice. This is really kind of wonderful. thank you.

HI BigTreat, The point of these forums is not to have members build projects on demand, but to show them how to use various features of the GSAP API. The demo Shaun provided should be more than adequate to show how to break up an image and animate different parts. here is another demo from @Rodrigo that uses a full grid. Hit the "remove image" and "restore image" buttons a few times: To build something like revolution slider from scratch with your special requirements just takes too much custom html, css and js. Unfortunately it would be way too time consuming for people to be able to build that properly and try to teach you at the same time. Again, if you have specific questions related to GSAP and a simple demo we can work off, we are more than happy to help. Thanks for understanding.

Assuming it does not impact performance I would say it be would desirable. It is rather counter intuitive the way it needs to be handled now and likely to trip up a lot of people. And the resulting code would be simplified and easier to follow when things get complex.

You can also add a global handler something like this that will prevent the page from being visible until all assets are ready. In head: <style type="text/css"> .js {visibility: hidden;} </style> <script type="text/javascript"> document.getElementsByTagName('html')[0].className = 'js'; </script> Before closing body tag: <script> // assuming jQuery was loaded with assets window.onload = function() { $('html').removeClass('js');}; </script> Discussion on SO of various page load event handlers: https://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load

You can search the forum/Google for FOUC (Flash Of Unstyled Content) Here's another post by Master Blake that shows his approach. Happy tweening.

The best thing to do here for any kind of help would be to distill the problem down in a CodePen. We can then fork and recommend things to fix any issues you might encounter. But, at first glance ... the get rid of the initial flash of the SVG, you can simply use some inline CSS to not display it, add "opacity: 0;" (or visibility: hidden;") to its selector in a style sheet, or load it in with JS within $('document').ready. (I'm sure there are other options I'm forgetting right now). Edit: Dang it ... did it again.

Nice work on the site. Looking good. We really can't investigate a standalone javascript file with 100+ lines of code. However, if you are seeing elements appear on page load before you want to animate them, most often what you can and should do is set their visibility to hidden in the css path { visibility:hidden; } and then in the js when it comes time animate them use TweenLite.set("path", {visibility:"visible"}); It sounds like your page is rendering before the js runs which is typical. So by setting the visibility to hidden via css, they will not be shown on the initial render of the page.

Hello @determin1st and Welcome to the GreenSock forum! I would have to agree with @Acccent regarding height, padding and box-sizing. The box-sizing property takes into account the CSS Box Model. You can see in the CSS Spec for height that when you use box-sizing: border-box that the height calculation of the browser will include the height of the borders. CSS height spec: https://drafts.csswg.org/css-box-3/#the-width-and-height-properties You also have to take into consideration CSS inheritance, and the fact that anytime you change padding it will affect the height of the parent containing element even without using box-sizing. But you can get around this by: using box-sizing: content-box for div instead of border-box. No need to remove or stop using box-sizing. remove or don't use the !important declaration on the height: auto property for .box selector. !important should only be used as a last resort. Just keep in mind that anytime you animate margin, padding, width, height, and border the animation wont be as smooth as animating transforms and opacity. Since anything animated that is not transforms or opacity will cause layout to re-triggered causing jank (lost frames) due to how CSS is rendered. See Jack's @GreenSock article on this: https://css-tricks.com/myth-busting-css-animations-vs-javascript/ See CSS Triggers: https://csstriggers.com/ Also you should set the duration to a lower number. 10 seconds will be a really slow animation, and look like its either broke or nothing is happening. Setting i the duration to something like 1 second or 0.5 second like @Sahil did in his codepen will make it animate better. For full control sometimes its better to just use a fromTo() tween instead of animating classes using className. GSAP fromTo(): https://greensock.com/docs/TimelineMax/fromTo() Happy Tweening!

You can use modifiers plugin to calculate values before applying them so your tween will continue playing on resize as if nothing happened. Though if your current tween inside the timeline is not active then you will have to manually set it's position on resize.

@DevSaver We had few questions recently about this similar issue, some of them were caused by local files. And others were because CSS file that applies pseudo elements was being loaded after javascript file. You can see that happening in following demo. If neither solves the issue then we will need more information like, what kind of setup you have, whether you are using latest files and if it happens in all browsers or some specific browsers. A demo would help, if you can't reproduce it on codepen then a link to live site or reduced case demo from your server will be helpful.

You need to use feDisplacementMap and pass two sources to it using in and in2, which would be result of turbulence and the source graphic.

Well, technically you could just invalidate() the timeline/tween to force it to re-record all the starting/ending values on the next tick, but you could also just create a new tween each time and simplify it like: $(window).on("resize", function() { TweenMax.to(elem, 1, {y:$(window).height() / 100 * 50}); });

Did you make that graphic? I must admit that I lost a lot of time yesterday creating that demo. Not because the code is complicated, it's not. But because the more I tweaked the code, the more entertaining they became, almost like they had a mind of their own at times. Definitely one of the coolest things I've worked on all year.

Here's a random function for decimal values... function random(min, max) { if (max == null) { max = min; min = 0; } if (min > max) { var tmp = min; min = max; max = tmp; } return min + (max - min) * Math.random(); } Just pass in your min and max, and it will return a floating-point value. If you pass in a single value, 0 will be the default min. // This is the same... random(10); // ... as this random(0, 10); But we can improve upon that. What about probability? Here you go. Just pass in a chance value from 0 to 100. If you want something to have a 30% chance of happening,it would look like this. if (chanceRoll(30)) { // Do something... } function chanceRoll(chance) { if (chance == null) { chance = 50; } return chance > 0 && Math.random() * 100 <= chance; } And here's another handy function that will randomly choose a value for you. var direction = randomChoice("moveUp", "moveDown"); function randomChoice(choice1, choice2) { return Math.random() < 0.5 ? choice1 : choice2; } Another thing I would suggest is to animate your x and y values separately. When you animate them together, it looks very linear. Here's how I do that. tweenProperty(carl, "x"); tweenProperty(carl, "y"); function tweenProperty(target, prop) { TweenLite.to(target, random(1, 6), { [prop]: random(100, 200), ease: Sine.easeInOut, onComplete: tweenProperty, onCompleteParams: [target, prop] }); } Now it's time see all this in action. I really like your demo, but it looked like Carl was getting kind of lonely, so I invited his friend over, who goes by the name of Jack. Yeah, I know, but it's purely coincidental. Watch as they play together. They like to see who can spin around the most times. It's latest fad, and all the cool bats are doing it. .

RomanHoefner you are totally right, I was using handbreak, and I had issues like that , changed to a properly compressed file and everything is ok now.

Hi and welcome to the GreenSock forums, Thanks for the demos. Just so you know we made a very deliberate decision to make sure that .call() functions would only fire when the playhead arrives at the call()'s time. Not when the playhead leaves. So if you have a callback at the end of the timeline and you play forward from the beginning, it will execute when the playhead reaches the end of the timeline. If you then reverse() the timeline, the call() will not fire again. This is all by design. At one point in time the API did behave the way you are expecting it to, but more users found that behavior awkward or it gave un-wanted results. Basically we had people say, "hey, callbacks should only fire when I reach them, not when I leave them". Frankly, I see both sides, but we had to make a decision based on what we thought was most reasonable for most use cases. We went with the logic that a call() placed at the end of the timeline should only fire when the playhead reaches that point in time, not when it leaves it. The solution to the problem is just what you stumbled into in your first post. Place the callback very very very close to the end of the animation. This way the playhead will pass through it when the animation finishes and when it reverses back to the beginning. http://codepen.io/GreenSock/pen/JoYLjz