Leaderboard

Here's a fork of your pen, I marked the changes in the CSS and JS with "CHANGES HERE". The scale is always animating up, but it should be enough to get you started.

Hi! Well, if you open the inspector on the website you linked, you can get an idea of what they're doing. On each scroll/click, they're actually completely removing the current image (ie. getting rid of a node), and replacing it with a new one which contains the new image. That new image's opacity and scale animate, so that it fades in and either slightly shrinks or grows depending on the scroll direction. That's not necessarily the only way to do this though. You could have all the images except the first one invisible by default (with display: none), and then on scroll you make the current one invisible and use autoAlpha to animate the new one into view. Does that make sense?

My suggestion would be to get the computed styles that `inherit` renders ... and tween back to those values. Hope this helps and happy tweening! Shaun

Here's another good solution from Shaun for parallax scrolling. Links tween progress to window scroll position.

As @Jonathan said, you should use .addEventListener(). But I would say that you should do that for everything. When you directly set an event handler, there can only be one. If there was some other code that was listening for load or scroll events, you just removed those listeners. // Only allows 1 event handler window.onload = function() {}; window.onscroll = function() {}; // Allows multiple event handlers window.addEventListener("load", function() {}); window.addEventListener("scroll", function() {});

Try the below.. window.onload has always been buggy in IE window.addEventListener("load", function(){ // code goes here }, false);

Hi and welcome to the GreenSock forums. I don't know anything about Howler but it looks like you've had success tweening properties of your Howler objects. My assumption is that if you can tween sounder's volume like tl.to(sounder, 1, {volume:1}) Then volume is a property of sounder that you should be able to log with console.log(sounder.volume); If you want to constantly log the volume you can use an onUpdate callback on your timeline. Perhaps something like var tl = new TimelineMax( {paused:true, repeat:-1, yoyo:true, onUpdate:logStuff}); function logStuff() { console.log(sounder.volume); } If you take a few minutes to create a CodePen demo (or jsfiddle, plunkr, jsbin, etc) it will make it much easier to understand what you are doing and offer suggestions.

I'm not 100% sure, but I think you're asking about the parallax effect on scroll? If that's the case, we've had several discussions about it. Check out these threads for more info and ideas. Those are just a few of the discussions. Please use the search feature and look for parallax and you'll find several more threads. Hopefully that helps. Happy tweening.

As @Sahil mentioned, they are using canvas for those transitions. You could probably use a Pixi displacement filter and come up with something similar. Here's a demo of Pixi filters. http://pixijs.io/pixi-filters/tools/demo/ And the main Pixi site. http://www.pixijs.com/ Your other thread mentioned you were a beginner so I'd recommend trying some less complicated animations to get started. That website you're referencing is pretty advanced and would probably be quite frustrating to start with something that ambitious. Good luck with your project.

I don't have much time right now to look into this, but I wanted to mention a couple of ideas: Are you using the latest version of GSAP? It looks like you've got a bunch of attribute transforms on the SVGs, some of which include rotate() which wasn't parsable in old versions of GSAP. Have you tried forcing your timelines to the end and back again to the beginning, just to force the recording of the start/end values? I noticed you're doing a lot of from() tweens (which is fine) but those can sometimes catch people with logic issues because they use the CURRENT values as the destination ones but sometimes people have logic built on rollovers or something else that's very dynamic. So, for example, if the user clicks quickly, and a from() tween is fired in the middle of another tween, the current values are locked in mid-way (not a GSAP problem at all - it's just a logic thing). So, for example, if you create your timelines and then do something like tl.progress(1).progress(0), it forces it to the end (triggering all the tweens to record starting/ending values) and then back again. Worth a shot in your scenario. Let us know if either of those help.

I've never worked with Highcharts, Ceros or D3, but I know it's possible (if a but cumbersome) to create pie charts with pure CSS (see here for one example among many) and anything done with CSS can be easily animated with GSAP. Of course you could also just make one with SVG, which would simplify things even further. If you want the easiest solution though, you'd just make histograms

I'm currently building an app with Electron as well, and have run into no issues so far

Your each() loop is targeting the class of .container, but you only have one of those so the box animations are firing at the same time. You'd want to target the .img_section class like this: $(".img_section").each(function() { The other problem is your trigger is pretty far down on the page so the element timelines are firing on page load. Here's a super simple example using some plain divs that should help. If you're using ScrollMagic, I'd highly recommend using the addIndicators() plugin to make your debugging easier. Happy tweening.

I used the GSAP framework extensively in a lot of Desktop Apps mainly using electron. It worked wonderfully. There are very up to date externs for GSAP / Haxe and I can't recommend it enough.

Thanks for allowing us to view the video Do you have a screenshot or example of the 2 elements your display block and none on. Or a tree markup so we can see context of both mobile and desktop in the DOM.. Because it will be hard to debug on what might be happening. Also are you using 768px as your break point from desktop to mobile. Also what are using to swap display block and none, A resize event. And if so are you throttling and or debouncing the resize event so its not changing the bootstrap classes multiple times due to how the resize event fire multiple times within a second. :0

Hello @BONOMITE and welcome to the GreenSock forum! When i look at both codepen examples above i do not see display none or block used at all? And when i try to view your ent.box.com video it goes to a log in screen. So a person will need to log in or register to see the video which most people wont do, for times sake. Can you please describe the specific issue your having so we can understand what your seeing and what is happening in your code example? Thanks

Hello @Johanna and welcome to the GreenSock forums! Try a comma separated string instead of an array for the selector target parameter, How does that help? TweenLite.set("#desktopTick, .desktopFormContent, #desktopSignature, #leftJump, #rightJump, .tabletDing, .smartphoneDing", {drawSVG:0}); TweenLite.set(["#tabletFormContent, #smartphoneFormContent"], {opacity:0}); And see if that helps IE11 evil

Hey Guys, @PointC thanks so much for your help, you definitely saved me a few hours of work today! I owe you a beer! I'm going to continue fleshing this out, I'll share the finished product with you once I'm done Jamie

Hi @j.burleigh1 Welcome to the forum. I was gonna suggest the same thing about one timeline and linking the progress() to scroll. Here's a quick fork of your demo with one timeline. Hopefully that helps a bit. Happy tweening and thank you for being a Club GreenSock member.

That is happening because your child timelines are paused so when you add them into the parent timeline, parent timeline starts playing but tweens remain paused. That's why when you click on 'play 1 and 2' nothing happens. When you click on 'play 1' and 'play 2' they jump because your parent timeline is complete and playhead of child timelines is tied to parent timeline. I doubt you can play child timelines independently, though you can tween them.

Hi, I just want to introduce Compress-Or-Die which is an online compression tool especially created for the creators of banners... so I hope for the most of you. It isn't a tool like tinyjpg or jpegmini that just allows to shrink existing JPGs a little bit. It's the one that creates your (also low quality) images from your original data and really squeezes out the last byte. And allows things like JPGs with transparency and "Selective quality" (as known from Adobe Fireworks) btw... Take a look at it here: http://compress-or-die.com/ In this context these articles could be interesting that explain a lot of the options you can set: http://compress-or-die.com/Understanding-JPG http://compress-or-die.com/Understanding-PNG I am the author of the tool and the article. So if you have questions, wishes or something else, just drop me a line. Thanks, Christoph

Hi @harp30 Welcome to the forum. You'd probably want to use Pixi shaders for that. This article should be a good starting point. https://designmodo.com/smoke-transitions/ Here's one about Pixi shaders https://www.awwwards.com/a-gentle-introduction-to-shaders-with-pixi-js.html Happy tweening.

Welcome to the forums, @Seb-AS. Another AS3 guy, huh? Nice! In my opinion, the most intuitive behavior would involve altering the transformOrigin of your element so that it's lined up in the center of the area/screen every time you do a scale. One idea would be to create a wrapper <div> around your element and scale THAT instead. So the draggable x/y coordinate stuff is still on your original <div>, but the scaling only happens on the container. That way, the center of the container isn't shifting around all the time with the dragging. If you need to do all the scaling on the original element, that's totally doable but it's not a simple thing to do seamlessly. You just need to do some math and juggle coordinates. If you want to pursue that, I'd recommend providing a reduced test case in codepen that'd serve as a good jumping-off point. I don't have time to build something from scratch for you right now. But again, I suspect the wrapper <div> would simplify all this for you anyway. At least in my head that seems like the easiest solution - I haven't battle-tested the idea. Let us know how it goes. Happy tweening/dragging!

I only changed the animation and didn't look at the rest of the code, as there's a lot of it. The problem must be coming from somewhere else! If you could make a more reduced test case that would make it easier for us to help you out

Welcome to the forums, @ghenry. Sorry to hear about the trouble. I can't seem to replicate that issue with your codepen - is there anything special I need to do? Also, what version of GSAP are you using? I'd definitely recommend using the latest. If there's any way to provide a reduced test case (ideally in codepen), that'd go a LONG way in helping troubleshoot this. I know you provided a codepen - I just can't see any issues there, so perhaps I'm missing something.

Thanks Jack. Always super helpful! I've passed this along to the animator on this project. I'll let you know how it goes! You rock!

No special license is required for that, no. We sure appreciate you asking to make sure, though. Go forth and tween with confidence More info on licensing, in case anyone needs it: https://greensock.com/why-license/ and https://greensock.com/licensing And if you need to use any of the bonus plugins, you'd of course need to sign up for Club GreenSock.

It works perfectly thank you !

Oh, that's no problem. You just need to restructure your code a bit. This is a good use case for the "cycle" feature of the staggerTo() method because you can call a function for each target and return the appropriate value: Just make sure that you use a relatively recent version of GSAP (the old one you were using didn't support this feature). Does that help?

Yeah, what you have isn't bad at all, but here's a slightly different approach that some might find a tad more readable: var chestTween = []; var delays = []; for (var i = 0; i < 9; i++) { delays.push(4 + i * .2); } delays = shuffle(delays); $(".chest").each(function(i, e) { TweenMax.from(this, 1, { x: randomRelInt(1, 201), y: randomRelInt(1, 201), ease: Power4.easeOut, delay: delays[i]; }); TweenMax.fromTo(this, 1, { rotation: -360, scale: 0 }, { rotation: random(-6, -1), scale: 1, ease: Power4.easeOut, delay: delays[i] }); chestTween[i] = TweenMax.to(this, 2, { rotation: random(1, 6), ease: Power1.easeInOut, repeat: -1, yoyo: true, delay: 1 + delays[i] }); }); function random(min, max) { return Math.floor(min + Math.random() * (max - min)); } function randomRelInt(min, max) { return ((Math.random() < 0.5) ? "+=" : "-=") + parseInt(random(min, max)); } Happy tweening!

Have anything to do with will-change perhaps? And then try without those small z movements? A video or CodePen would be helpful.

Ah, if you want throwProps to work (and keep the line connected), you can simply add an onThrowUpdate that's the same as the onDrag: throwProps:true, onThrowUpdate:updateBoxesPath Glad you got things working. Happy dragging!

If I understand your goal correctly, wouldn't it be as simple as changing the CSS of #svg from position: fixed to position: absolute?

Nice work, Craig!

I'm a little fuzzy on exactly what you expect here (what does "fix" mean?). By default, smoothOrigin on SVG elements is true, so to accommodate for the shifting that's necessary, GSAP tracks it in an "xOffset" and "yOffset" value in the _gsTransform (purposely undocumented). This is a very unusual edge case where it seems like you're wanting smoothOrigin sometimes, and then you want to omit that other times. Hm. Here's one way you could just offset the x and y values based on the xOffset and yOffset: Is that what you wanted?

You'd want to use the position parameter to start the second stagger earlier. As you have it now all the elements will stagger in their opacity and then all will stagger out. Using the position parameter, you can make it work correctly. Here's a basic example. Here's some more info about the position parameter. https://greensock.com/position-parameter Happy tweening.

I just tested this in IE11 and didn't see any problems. The set() seemed fine to me. If you want to experiment a bit, you could always remove the sets and use fromTo() tweens to see if you see any difference in IE11. Happy tweening.

It is really hard to tell you how you can create entire website. As you mentioned in other thread that you are beginner, I would recommend spending some time to get familiar with basics. You can start by visiting 'Getting started with GSAP' page https://greensock.com/get-started-js Take a look at following thread that discuss similar mouse effects, The parallax effect, The transitions, there is a lot going on in that site. It uses canvas for the background transition effects. My guess is it uses PIXI js. Which is pretty advanced stuff. You can visit PIXI js website to learn more about it.