Leaderboard

I'm not really sure what should be happening here, but you're creating your timeline every time you click the section 1 button. This is causing overwrites and everything will look funky. I think you meant to make the master a global variable and restart it on click. Please make these changes to the end of your code. $('#btn1').click(function(){ $('#c2').css('display','none'); $('#c1').css('display','block'); master.restart(); }); we3dxAnimation(); Happy tweening.

Hi @zzwes Welcome to the forum. There would be a few ways to make this happen. Based on what you have so far, I'd probably create a timeline for each pizza and change the starting progress(). (Pretty much what you were doing). I then added each timeline to an array, loop through it and increment the progress of each timeline by +0.2. every few seconds. I've just used a delayed call to keep the animation going, but you could certainly add some interactivity with a button or draggable too. Here's a fork of your pen. You mentioned poor performance on mobile. Please keep in mind that GSAP is only animating values. All the rendering is done by the browser so you may still see less than desirable results on mobile with these images. Hopefully that helps. Happy tweening and welcome aboard.

Just to follow up with this.. Its now all working reliably, thanks for your help! This was mainly achieved by changing the exit animations from a staggerFrom() to a staggerTo(). I also replaced the jquery fadeIn and Out i was using with a xfade function using GASP. For completeness, here's pen with the kind of things i did: Many thanks!!

Thank you so much @Visual-Q, Really appreciate you for taking time and effort to help the community. Let me try to solve the problem using deltaY. Thanks once again.

I notice two problems: 1) You've specifically coded it not to work when the field is empty: if (x != null && x.length > 0 && x.length <= 9) { So you should get rid of that condition or rework it somehow (I'm not sure exactly what you're trying to do). 2) oninput seems to fire before the new value is registered in the input, so maybe try changing it to: onkeydown="setTimeout(inputVal, 1)" We really try to keep these forums focused on GSAP-specific problems. General questions like this are probably better suited to a place like Stack Overflow. Happy tweening!

Ah, yes - it looks like you were trying to use the ES6 module version of CustomEase directly in the browser through a <script> tag but that'll only work if you set type="module" in the <script> tag, and only in browsers that support ES6 (most modern ones do these days). That's not related to GSAP specifically - it's just a general JavaScript/browser thing. If you want to use CustomEase in a <script> tag that's not being run through a bundler like Webpack, I'd strongly recommend using the regular minified (ES5) version of the file. It sounds like you did that and it works well. Super. Let us know if you need anything else. Happy tweening!

Oh, that is some tight artwork. Not quite what I was picturing, but you can still use a loop to create a bunch of circles in a mask. I just eyeballed this so you'll probably need to make some adjustments, but here's a fork of your pen that should get you started. Does that help? Happy tweening.

GSAP animates stuff. Look at speech recognition. https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API This demo works in Chrome. https://davidwalsh.name/demo/speech-recognition.php

The waark site appears to use a dom element that is the size of the window and loads all animated elements into it. Just a guess but because the content is the size of the viewport the document does not actually scroll it is likely using an event listener to activate animation using deltaY. See: https://www.w3schools.com/jsref/event_wheel_deltay.asp https://www.sitepoint.com/html5-javascript-mouse-wheel/ https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY With wheel events you can trigger animations with deltaY changes. Setup the container 100% high and wide with overflow hidden then you can place all animation content inside it and show hide and animate it to the deltaY changes.

Hi @matthee, Here are some additional comments on CARL's great example. With '.fromTo' the range of scaling can be defined. With separate tweens per axis, the axes can be animated offset (different durations). Depending on the scaling the SVG should be set with 'overflow: visible'. And: Try out the options that @OSUblake offers: for example 'centerY' or 'numPoints' ... happy tweening and a unique blob ... Mikel

you can set scaleX and scaleY independently

Sorry, DrawSVG only works with strokes. You'll need to use a mask to reveal that path. If they're all circular like that, you could use a loop to create a mask for each path. Happy tweening.

Hi @Nathan Harold Welcome to the forum. When you have ScrollMagic hijack the tween/timeline duration you have to think in ratios or percentages. Here's a really basic example: You'll see three boxes on a timeline. All three start at the same time and move 500px on the x axis. They each have a different duration. (Red:1, Green:5, Blue:10) The duration of the timeline is 10 seconds. I've set the ScrollMagic duration to 50% of the window height. Since the blue box tween has a duration of 10 seconds, it takes the full scroll distance to complete its animation. Whereas the green duration is 5 so it takes 50% of the scroll distance and the red with a duration of 1 only takes 10% of the scroll distance to finish. It doesn't really matter what duration you set in ScrollMagic. You'll still see the same ratio in the above scenario. Blue:100% of the scroll distance, Green: 50% of the distance and Red:10% of the distance. When you have a whole timeline that has sequential tweens, the same thing happens. Say you have this timeline: tl.to (".red", 3, {x:500}); tl.to (".green", 1, {x:500}); tl.to (".blue", 1, {x:500}); The total duration of that timeline is 5 seconds. So the red box will take 60% (3/5) of the scroll distance and the green and blue boxes will each take 20% (1/5) of the scroll distance to complete. Again it does not matter if the ScrollMagic duration is 100px or 10,000px, the percentage of the scroll distance for each of the tweens to complete remains the same. Make sense? Happy tweening.

Hi and welcome to the forum Reversing a loose collection of tweens will be a bit tricky. That's where you'd want to use a timeline. Here's a fork of your pen that reverses by setting the repeat count to 1 and yoyo to true. Of course you can set the repeat count to anything you like. Setting it to -1 will repeat infinitely. You can also add a button to control the reverse too. More info about timelines: https://greensock.com/docs/TimelineMax More info about the position parameter. https://greensock.com/position-parameter Hopefully that helps. Happy tweening.

Thank you so much for your reply!! This has given me plenty to work with and think about, i really had hit a dead end with this one as frustratingly it was working perfectly on the dev machine and i was unaware of a problem. It was only when deploying to other machines it i found an issue. i had never really experienced this with electron as its usually pretty consistent between devices as it has the browser packaged, but at least it enlightened me to the errors in my code. I am sure you have cracked it and that my problem lies within the from animation callback as your demo pen is doing very similar things to what i am experiencing. The setTimeout() was really just to simulate the loading time of the app as there is a splash screen and isn't used for any animation timings. Hopefully that isn't causing problems in this instance. However, i am using it in another animation for a side menu popup that auto closes so this information is extremely useful and i will rewrite that also! I'll use GASP for fade transitions and remove Jquery. i will work on this again this evening and will follow up with my results Thanks again! I have just joined the club!!