Leaderboard

yup and just to add onto Jonathan's advice, here you can see some buttons to navigate be sure to read this thread for more info on what is happening and how it works https://greensock.com/forums/topic/16952-modifiers-plugin-for-infinite-image-carousel/

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!

Hi @kbeats, because we need each block to be controlled by its own timeline, we can't keep recreating var tl = new TimlineMax()... Because we'll just keep overwriting the `tl` ... potentially reversing the wrong timeline. So, we need dynamic variable names to hold the timelines. In PHP, we can do cool things like <? $something = 'foo'; $$something = 'bar'; print $foo; // -> bar // we can also do $i = 1; ${'something_'.$i} = 'Green'; $i++; ${'something_'.$i} = 'Sock'; print $something_1.$something_2; // -> GreenSock In Javascript, we're not so fortunate with the variable variables. But, in the global scope, when assigning var a = 1; we can get to the value of `a` with any of the following ... console.log( a ); console.log( window.a ); console.log( window['a'] ); So, seeing as `a` is a property of the window object (in the global scope), we see how variables can be declared that way too. Dot syntax doesn't help construct a variable variable because we can't use an expression for the property ( e.g. this.'something'+i just doesn't work ) But arrays allow strings as key values ... so we can use an expression there ( e.g. this['something_'+i] ). Soooooo, var tl = new TimelineMax(); Is the same as stating window.['tl'] = new TimelineMax(); which means var i = 0; window.['tl_'+i] = new TimelineMax(); i++; window.['tl_'+i] = new TimelineMax(); is perfectly valid for creating dynamic variable names .. and we now have tl_1; // a TimlineMax object tl_2; // another TimelineMax object and, in terms of if (!window[id]) { ... I'm just checking to see if it's been defined. If not, create the Timeline and control it. If yes, don't recreate the timeline, just control it. Hope this helps! EDIT *** After rereading ... I don't want to ignore what would be done within a function (i.e. not in the global scope) If we do the following .. var a = 1; function something(){ var a = 2; console.log( a ); } something(); console.log( a ); The console would show 2 1 because when something() is called, it in itself has a console.log which references the `a` in the local scope, outputting 2 ... and then the other console.log is called after that referencing the `a` in the global scope, outputting 1. But, we can create variable variables within the function just like I did above by declaring in the window object to then be addressable directly in the global scope or anywhere as a property of window. But if we just need variable variables within the scope of a function, we can also do function something(){ var i = 0; this['tl_'+i] = new TimelineMax(); i++; this['tl_'+i] = new TimelineMax(); // creating variables `tl_0` and `tl_1` within the scope of the function }

It's a waste of time to worry about such things because they probably won't matter. At least, not for the scenario you described. Go for the solution that is the easiest to read, understand, and update, C. If you notice a performance problem, investigate it, but there's a 99.99% chance that it will be related to what you're animating, i.e. SVG.

Well, you're moving around a full screen image. That's pretty hard on the browser. My personal preference for something like this would be to use a mask or clip-path. I showed you that technique in your other thread here: Regarding your question about revealing from the middle. You're using width/height which always start at top left. You could animate the xPercent of the image at the same time as you're animating the width of the parent. Something like this should work. Again though, my preference here would be a clip-path or mask. I think you'd get better performance and you could use all kinds of shapes for interesting transitions. Happy tweening.

You are targeting `#line` in your .each, and you only have one ID of 'line'. You should be using a class in this case if you want to be semantically correct. See updated pen:

I've no idea what should be happening with the images, but here's a fork with the circles starting at 12 o'clock. Since all your timelines and listeners are the same, I'd also recommend a loop to create everything. Happy tweening.

Please see PointC's wonderful post here:

To move the whole group seamlessly you'll need a second copy. You can clone it, offset the copy x:100% and then tween both to a relative x:-=100%. Then just loop the tween. Happy tweening.

You could use two paths each starting at the middle point and tween them with the same selector. Or starting with a tween from 'scaleX: 0' Check the CodePen:

Hi @rulercreative Welcome to the forum and thanks for joining Club GreenSock. Do you want to make this all move as a group or do you want each cloud to move individually? If it's the latter, I'd probably do something like this: Does that help? Happy tweening.

Yep, I'd agree with @OSUblake. Technically, though, I personally favor CustomEase when creating very nuanced movements because (at least in my experience) when I try to recreate an effect using a bunch of sequenced to() values it just doesn't quite feel as fluid. That's not because of anything in GSAP - it's just the nature of the beast. Like I've seen lots of attempts at doing an Elastic.easeOut or a realistic bounce with squash/stretch using straight-up CSS keyframes and it looked really weird. With CustomEase, it felt natural. In terms of raw runtime performance, the CustomEase one is likely the best but there's a bit more up-front work to create the ease itself and cache the values. Once they're built, though, it's very fast to actually get/set the values during the tween. I optimized the snot out of it Again, performance-wise I doubt you're gonna notice any real-world difference in any of them. Rendering performance in the browser is typically 99%+ of the load on the browser especially with SVG. Happy tweening!

Hi, Indeed you need to find a way that the creators of the components give in order to reach into the component and get the DOM node. In this case Styled Components do allow the use if innerRef as @y4ure mentions. Here is an issue on the repo about it with some sample snippet: https://github.com/styled-components/styled-components/issues/1151 Try this and if you keep having issues, create a stackblitz or codepen sample to get a better look at the problem. I remember using Ant Design for a project and ultimately we had to bake our own version of some components in order to expose the DOM nodes when needed. As mentioned before, this all depends if the creators of the libraries allow users access to the DOM nodes of their components. Some do and some don't for security reasons, but that's outside the scope of this thread. Personally I've never worked with this library, I'm an old fashion guy that writes it's own SCSS files for the styles and uses class declarations in my components, but perhaps that comes with being over 40 Happy Tweening!!! PS: thanks for the kind words about the article

If you're using a circle as a mask, all you need to do is rotate that circle -90 degrees. That will work in most browsers, but if you read the post @Carl mentioned, you'll see that the most trouble free approach is converting it to path. If you have an updated demo, we can take peek.

Have you tried using innerRef instead of ref?

Looks like Shaun has you all fixed up, but here's a slightly different approach just in case you need options. Happy tweening.

Hi @kbeats, the issue I see is that you are appending to the same timeline and playing/reversing that timeline. That's why they get added together. Give this a try,

Yup - that's a good idea too @elegantseagulls. Thanks for jumping in. Happy tweening.

This is really helpful. Thank you

Everything is based on linear interpolation (lerp) being used like an exponential ease. Explaining dt and deltaTime can be hard to explain, so I'm just going to link to this. https://gamedev.stackexchange.com/a/149106/109260 I had one line of code commented out. Use one or the other. Frame dependent animations can slow down during high CPU usage. if (Math.abs(item.endOffset - item.currentOffset < this.endThreshold)) { item.currentOffset = item.endOffset; } else { // FRAME DEPENDENT // item.currentOffset += (item.endOffset - item.currentOffset) * this.scrollEase; // FRAME INDEPENDENT // item.currentOffset += (item.endOffset - item.currentOffset) * dt; } That gamedev answer also mentioned Zeno, which is like a paradox. You can never arrive at a destination because the steps just get smaller and smaller. The threshold stops calculating stuff after a certain limit, i.e. changes you won't see because they are too small.

Yup, this is exactly what I'm looking for. Perfect solution to keep frame rate high and not waste resources.

Welcome to the forum. I'm not quite sure what we should be looking at on that website. You said you had 100 tests and revisions. Perhaps you can put one of them into a demo for us? We don't have the resources to offer advice about entire websites, but we're happy to help if your question or problem is related to GSAP. Happy tweening.

When a tween is nested its onComplete is not fired when its parent is being reversed because, well, the tween is not completing then... its just playing backwards from its end. Instead of using staggerFrom, you can loop through each element and add a tween and a call() like so: console.clear(); var tl = new TimelineMax({yoyo: true, repeat:1, repeatDelay:1}) document.querySelectorAll('.box').forEach(function(element, index) { tl.from(element, 0.3, {opacity:0}, index*1) .call(update, [index]) }); //enable next line if you want last tween to fire its callback when timeline reverses. //tl.set({}, {}, "+=0.001") //the line above adds a little teensy weensy bit of time after the last tween. //without this the playhead will rest on the end of the last tween and when the parent reverses then the callback won't fire as the playhead is already there. function update(index){ console.log('completed tween' + index) } Open the CodePen console while you view:

You just forgot to load the DrawSVG plugin.

Can confirm, an SVG morph wasn't looking pretty anymore after updating our gulp packages. Everthing's good again after a downgrade: // package.json // not good: "gulp-uglify": "^3.0.2", "gulp-uglify": "^2.1.2",

My apologies I hadn't even indented the CSS properly within the Codepen editor.Hence missing .about__wrapper:before rule. I've made the changes you suggested and the example works fine on CodePen and when developing locally using XAMPP. Yet, I'm still curious as to why I still continue getting the 'Uncaught Cannot tween a null target' error.' when working locally without using a server i.e. file:///C:/Users/Owner/Downloads/ExampleProject/index.html. even when implementing the changes suggested. Appreciate the help. Any clarification would be appreciated. Thanks.

Hello renrique and welcome to the GreenSock Forum! Your getting that error due to not having the CSS Rule .about__wrapper:before in your CSS. Which is also not reflected in the DOM. Even when i remove all JS, i still do not see the CSS Rule .about__wrapper:before in the CSS or markup when generated on page load. Or even see it in the compiled version of the SASS generated CSS. You must have that CSS rule .about__wrapper:before present in your CSS in order for CSSRulePlugin to tween that target. So make sure you add that .about__wrapper:before CSS rule in your CSS so CSSRulePlugin can find that CSS rule. Also keep in mind that when using the CSSRulePlugin that you must use the older single-colon syntax ( : ) and not the newer double-colon ( :: ) syntax for pseudo-elements i your CSS and in your JS when selecting that CSS rule.

i know there is a thread about polite loading into doubleclick and their enabler. how do a do a generic polite load using gsap for 3rd party banner vendors?