Leaderboard

Hi @kbeats I'm so confused. Why would something be incorrect before you check it? And that's way too many class checks. I think the original author of that demo was trying to avoid "hasClass" logic by linking the box to the target with the targetAttachedTo property, but the connection is not obvious because of the "target" naming being used with an event target in the same line of code. This will actually check if something is incorrect.

Hi @biuro Welcome to the forum. Please try wrapping your clipped text in a <g> tag and clipping the group. <g clip-path="url(#masktext)"> <text id="svgTextFilter" class="svgText" x="15" y="55" textLength="150" lengthAdjust="spacingAndGlyphs" >GreenSock</text> </g> Hopefully that helps. Happy tweening.

Sorry about the confusion. Yes, it was a problem only with rotationZ (which is just an alias for "rotation" anyway). It should be fixed in the next release, due out within the next week or so. Here's a preview version (uncompressed) of TweenMax: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js Better?

scale is just an alias for a combination of scaleX and scaleY. So just define those instead - that seems to work great. TweenMax.to('#square', 2, {bezier:{values:[ {left:'100px', top:'200px', scaleX:2, scaleY:2}, {left:'200px', top:'100px', scaleX:1, scaleY:1} ]}});

You're welcome, @jordank On another note ... it might be useful to seek to a label on the master timeline rather than restart ... in the event that you want to loop the middle portion of a master timeline. Defining a label within each master timeline add() and then passing that label as a 3rd parameter to looper would take care of that.

I think it's just a problem with your timeline reference ... "this" won't reference the master timeline (or any timeline) in that scope. Try passing the timeline as a parameter,

Hi and welcome to the GreenSock forums. Thanks for the demo. That's a pretty cool way to make a rotating sphere. The API makes it pretty straightforward to detect the midpoint of an animation. For any given animation you can query its duration() or progress() to get the "halfway" or mid point var tween = TweenMax.to(something, 10, {x:100, ease:Linear.easeNone}); to start another animation when that tween is in the middle you would schedule it start at a time of tween.duration() * 0.5 //or tween.progress(0.5) And, yes I'd use a timeline to schedule one tween to start at the midpoint of another. An issue with your setup is that your elements are dispersed all over the globe initially and each rotate 360 from their current position. So let's say an element is exactly behind the globe, if you fade it out halfway through its animation it will fade out when it is in front of the globe. no good. My first step was to set up every element in a vertical half-ring around the front of the globe and get them all to rotate the same way and fade out at the same time once I got that working I then randomized the started progress of each elements timeline using progress(Math.random()) A big component to this is using a SlowMo ease with yoyoMode set to true at the right time to get the elements to fade out and back in. https://greensock.com/docs/Easing/SlowMo I could probably take 2 hours explaining all this, but hopefully this gives you something to play with and tweak. --- Another approach might be to use an onUpdate callback to map the current rotationY to a range of opacities so that its opacity will be a factor of its rotation.

Hey, that's a pretty interesting use for vmax! However, there is a downside to that approach. The speed of the animation will appear different depending on where you click. It will be faster at the center than at the corners. Did you just guess the 260 value? That's close, but it actually won't cover the screen if it starts at a corner of a square shaped window. The vmax should be 283, which is 200 times the square root of 2. The square root of 2 is a ratio, which is the length of the diagonal of a unit square, a square that is 1 x 1 in size. Math.sqrt(1 * 1 + 1 * 1); Math.sqrt(2); There's actually a constant in JavaScript for that, Math.SQRT2 and its inverse Math.SQRT1_2.

Thanks for the demo. You reminded me of something. I don't think a lot of people know this, but the blur filters have a quality property. If you blur something too much, it starts to look blocky, like in your demo. Increasing the quality increases the number of passes the filter will do, resulting in a smoother looking blur. You can test it out here. The default quality value is 4, which is pretty low. When I first started using Pixi, it took me a good year before I discovered that was the reason blurring didn't look good after a certain value. It'd be nice if @GreenSock could incorporate the quality property into the plugin and make a mention of it the docs.

This is awesome Blake, that's exactly what I was looking to do. THANK YOU SO MUCH!

When starting out with coding it's best to try and reduce your project into smaller parts. Check out the plethora of examples on Greensocks CodePen here https://codepen.io/GreenSock/pens/popular The banner you are trying to build above could be created so many different ways! Finding a solution that you can relate to can be daunting in the beginning. This GSAP example should have all the parts you would need to replicate that banner https://codepen.io/GreenSock/pen/KJxyF?editors=0010 Good Luck!

Hi @RolandSoos I would have though clearProps:"all" as the first .set() on tl1 would have taken care of things ... but that doesn't do it either. ? For some reason ... "rotation" works as opposed to "rotationZ". Edit: Sorry Carl ... didn't see you in there

This should get you started. Happy tweening.

Hi Irine, Welcome to the forums! I am finding a bit difficult to understand your description of the issue here so, forgive me if it is not what you meant. I would say you have over eningeneered your setup a bit. You don't need all those different <transition> tags. And that's pretty much the reason why your animation is overlaping. Because all those <transition> tags are independent and they do not have the means to talk to each other. To achieve what, I believe, you intend, you need to have all your elements inside the same <transition> tag. See the bellow fork of your pen: You might want to go over Vue's transition documentation, if you haven't already, they will explain all the key concepts in detail there. https://vuejs.org/v2/guide/transitions.html

@codekai98 Now worries ... I think a big part of the problem here is all pens are accomplishing many things (slide navigation, slide transitions, slide element tweens, etc.) In my example, all you really have to focus on is a small part with the " function moveToSlide( index )", notably // Slide moving to TweenMax.to('.wrapper', 1 , { y: -$('.wrapper').height()*(index-1), rotation: 0, ease: Power2.easeOut } ); TweenMax.to( intoSection.find('.background-image-wrapper'), 1 , { y: 0, rotation: 0 } ); TweenMax.to( intoSection.find('h2') , .5, { y: 0, autoAlpha: 1 } ); TweenMax.staggerTo( intoSection.find('.some-content') , .75, { y: 0, autoAlpha: 1, delay: .5 }, .125, function(){ isScrolling = false; } ); That is what is handling the tweening of elements on the slide being moved into (rather than being tween on page load).

@Shaun Gorneau Wonderful! Hah, yes I was implementing this in my actual code and hit the exact roadblock you solve for above; great forethought! Thanks so much!!

I'm never absolutely certain about the 'Why?' of browser behavior. ? It's just been my experience that you'll encounter far fewer problems with SVG masks and clip-paths if you wrap them in a group and apply the clip/mask to the <g>. Even if I have one element to mask/clip, I always group it. Happy tweening.

Ah, in that case ... I think you're looking for three.js ... specifically this https://threejs.org/examples/#webgl_camera_cinematic

Hi @Luckyde, welcome to GreenSock! This should be fairly easy to accomplish. If you cover the y rotation of the ground (as in visually obstruct it with a piece of paper or your hand), the rest is fairly straight forward horizontal parallax. Here is a CodePen kind of showing that ... not hooked into Draggable, and just yoyoing ... and also poorly executed But the principles are there.

No problem, Shaun. Glad we came to same conclusion. Thanks for the help.

Hi RolandSoos, Thanks for the demo, very helpful. I'm a bit puzzled by this as I wasn't expecting the results you were seeing, and I don't think this is a case where you should have to use invalidate(). My first assumption in such a case is that the immediateRender of fromTo() tweens was causing an overwrite or something strange, but I don't think that is the case. What I did find was that using values in both tweens instead of rotationX worked as expected. For instance if you change rotationX to rotation, I think it does what you want We will have to investigate this a bit more and get back to you. Carl

Ya I guessed it. That's interesting, what are practical and common uses of Math.SQRT2 and SQRT1_2 that it is part of API? How would you go about normalizing the speed based on where you click? I gave it a quick try but my approach seems incomplete or hackish. EDIT: I guess you would suggest expoScaleEase, I will give it a try later.

Thanks, your code clear all my doubts. Its fun using greensock.

Try something like this. function onStop(){ mainT.kill() document.getElementById("main").innerHTML = ""; for (var i = 1; i < 25; i++) { window["t" + i] = null; } mainT = null; TweenLite.set(document.createElement("div"), { x: 100 }); }

I don't think a dummy value will work as it's not a real element, but it really doesn't matter if you tweened a real element because you're holding references to the same objects. You'll need to clean up after yourself and null all these timelines out if want them to be available for garbage collection. var t1 = new TimelineMax({repeat:-1}); var t2 = new TimelineMax({repeat:-1}); var t3 = new TimelineMax({repeat:-1}); var t4 = new TimelineMax({repeat:-1}); var t5 = new TimelineMax({repeat:-1}); var t6 = new TimelineMax({repeat:-1}); var t7 = new TimelineMax({repeat:-1}); var t8 = new TimelineMax({repeat:-1}); var t9 = new TimelineMax({repeat:-1}); var t10 = new TimelineMax({repeat:-1}); var t11 = new TimelineMax({repeat:-1}); var t12 = new TimelineMax({repeat:-1}); var t13 = new TimelineMax({repeat:-1}); var t14 = new TimelineMax({repeat:-1}); var t15 = new TimelineMax({repeat:-1}); var t16 = new TimelineMax({repeat:-1}); var t17 = new TimelineMax({repeat:-1}); var t18 = new TimelineMax({repeat:-1}); var t19 = new TimelineMax({repeat:-1}); var t20 = new TimelineMax({repeat:-1}); var t21 = new TimelineMax({repeat:-1}); var t22 = new TimelineMax({repeat:-1}); var t23 = new TimelineMax({repeat:-1}); var t24 = new TimelineMax({repeat:-1}); var mainT= new TimelineMax({paused:true})

Hi @codekai98 Welcome to the forum. The subject of this thread is quite similar to what you're asking and uses the demo you referenced too. I think it can help you. Happy tweening.

Using Studio for not Rich Media is optional. Most would not, because there are impression fees. Some don't care. There are reasons to like great tear sheets, and pushing the ad directly to DCM. Some don't know, they don't need to use Studio, post SWF era, because during the SWF era, any ad that involved more than one file (SWF) and one backup image, had to be Rich Media.

please provide a demo (the simpler the better) so that we can investigate further. thanks.

I'm seeing a number of errors related to jQuery not being loaded. http://prntscr.com/km15lf Its very difficult for us to diagnose a live site, especially without any instructions about where your javascript is. Please try to resolve those errors. If the problem still persists please let us know where you think we should look or provide a reduced test case, even if its just a single page with only the SVG and the pertinent js code. thx!

Happy to help!

Hi @gorelegacy They're all triggering at the same time because you've got the same timeline in each ScrollMagic trigger. You're creating a trigger for each .feather_container class which is correct, but you're using .setTween(timeline) for all of them. You want a separate timeline for each trigger. Those can be created manually or in a loop if they're all the same. Here are a couple of pens from other forum questions, but they show how to set up multiple triggers in ScrollMagic. Hopefully that helps. Happy tweening.