Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Carl last won the day on April 4 2019

Carl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. Thanks for the link. Very helpful. The issue is not at all related to the fact that you are loading TimelineLite on a page. The problem has to do with the fact that you are animating 4734 lines in an SVG and DrawSVG has to measure every single line and manipulate its stroke-dashoffset. I suspect the added time has more to do with the browser's reading and writing of values and not so much DrawSVG's computational time. Regardless, I would suggest you try a test with a much simpler svg just to make sure this is exactly where the problem is.
  2. Yes. I didn’t fix it. Just want you to see that you have to deal with those extra hover events somehow or reset the menu using a different event - like the opening of the menu.
  3. Thanks for the demo. In the future, please provide some instructions like "press the menu button in the top right to open the menu". The key issue can be exposed by adding one console.log() to your hover function menuLinkHover() { console.log("hover" + $(this).text()); tl.reversed() ? tl.play() : tl.reverse(); } https://codepen.io/GreenSock/project/editor/ZWGkoV when you click on the "menu" button and click on "About" you will see hover gets logged 3 times. 2 of those times AFTER the click. I put some code in a separate click handler as @GreenSock suggested (and was a great idea), but that won't work because 2 hovers get fired AFTER the click which undo anything that was done in the click function. I think your easiest route forward is to just reset each timeline back to progress(0) whenever the menu is re-opened.
  4. Very hard to tell without seeing this. Only under the rarest of circumstances where perhaps 10s of thousands of tweens are initiating at once would I suspect even a few milliseconds of interruption. 5 seconds is an incredibly long amount of time and I can't imagine how loading TimelineLite would cause that type of impact. I'm curious where you are loading TimelineLite from and why you are choosing to load it separately instead of just loading TweenMax. Are you loading GSAP files from a cdn or your own server? Again, without a demo or link to your site its impossible to know for sure and it will take way too long to try to guess.
  5. Hi and welcome to the GreenSock forums, Thanks for the demo. Its a bit confusing as the thing that says "click me please" doesn't have a click event attached to it. For other people testing this: You have to click on the red thing that says scale. Regardless, this seems to purely be a browser rendering issue. If you just use css to set the scale like transform: scaleX(1.03) scaleY(1.03); You get the exact same results. There really is nothing GSAP can do about that. There are only so many pixels available for anti-aliasing (smoothing) and scaling to 3 hundreths is such an insignificant amount of change that its kind of understandable that fidelity could be lost. Perhaps someone else has some ideas for getting it crisper. Its not really my area of expertise.
  6. Hi, That's a fairly advanced effect that has a decent amount of complexity to it. Definitely not something we can provide step-by-step instructions for, or even a reduced demo (unless someone already has something like this built). After inspecting the page with dev tools it appears they are applying a skewY to the main container div that holds all the text and images. Something like: Where it gets tricky is that the amount of skew seems to be directly tied to the speed AND direction of the scroll. Quite frankly it would take me quite a bit of time to figure it all out.
  7. Thanks for the super clear demo. Yes, there is a significant difference between how staggerTo() works on TweenMax and how it works on a Timeline (which probably isn't obvious to most users). From the docs: TweenMax https://greensock.com/docs/TweenMax/static.staggerTo() staggerTo() simply loops through the targets array and creates a to() tween for each object and then returns an array containing all of the resulting tweens (one for each object). TimelineLite / Max https://greensock.com/docs/TimelineMax/staggerTo() staggerTo() simply loops through the targets array and creates a to() tween for each and then inserts it at the appropriate place on a new TimelineLite instance whose onComplete corresponds to the onCompleteAll (if you define one) and then appends that TimelineLite to the timeline (as a nested child). So to further dig into your mystery its important to know what this is inside your function. If you console.log(this) for the TweenMax you will get the last tween, which means this.target is the target of the last tween. If you console.log(this) for the Timeline you will get a timeline (which is the new TimelineLite mentioned above). Timeline's don't have a target, which is why you are seeing undefined. Hopefully this helps you better understand what is happening. Again, its not something most people will pick up on in the first few weeks or even months of using GSAP. If you want to get the last target in a TimelineMax.staggerTo() you can use: new TimelineMax().staggerTo(".square",1,{y:30},0.1,0,function(){ console.log("With TimelineMax"); console.log(this.getChildren()[this.getChildren().length-1].target); });
  8. Carl

    Split Text Classes

    I wonder if there's a way to set different classes on different lines or if there is a better way to achieve this effect? You can animate alternating lines with different values using the cycle property in a staggerTo/staggerFrom. Below is a simplified example showing that some lines go left and others go right, but they all use the same class. you can read more about cycle here: https://greensock.com/cycle Although that example uses SplitText it isn't required for these types of effects, you can do the same thing on a bunch of divs that you create.
  9. Hi and welcome to the GreenSock forums, Thanks so much for the clear demo. Very helpful. We will have to look into this further. We will report back with what we find. Sorry for the inconvenience.
  10. Thanks for the demo. This demo below should illustrate clearly how to prevent a tween (or timeline) from restarting by checking its isActive() state and yes, It's fine to just use colored divs instead of images.
  11. Sorry, but I don't understand what you are asking. Thanks for the demo, but I don't understand what to do with it. What is rechteck3a? Am I supposed to look in the SVG code and try to decipher the rgb value? fill="rgba(250,250,50,0.70) Perhaps you can try to explain 1 simple interaction, the result it gives and the desired result you would like. I'm guessing your issue has more to do with how SVGs handle transform origin and nested elements and not necessarily something related to gsap. I think that GSAP's smoothOrigin may help you. Please read section challenge: set transformOrigin without unsightly jumps at: https://greensock.com/svg-tips
  12. Yeah, I agree with Shaun, CustomWiggle would probably be the easiest approach:
  13. <script src="TimelineLite.min"> (you left off .js) should be something like <script src="whereGSAPis/TimelineLite.min.js"> But you can't use TimelineLite without TweenLite AND you probably need CSSPlugin too. Since you are loading jQuery from a CDN I would suggest you do the same with TweenMax (which will include everything you need) <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js"></script> or just load TweenMax locally like <script src="whereGSAPis/TweenMax.min.js"> For more info please see the Getting Started article: https://greensock.com/get-started-js
  14. hi kellyimaging, I never was able to acquire any GWD templates (that I can remember now). Unfortunately I hear nothing about anyone using GWD so its tough to justify putting time into exploring it. I'm biased, but I still see a huge amount of potential for the Animate CC + GSAP combo. Its really great to have a strong visual interface to do your layout and art-creation in and have GSAP move things around. Animate CC is very frequently releasing new features and improvements.
  15. nothing at all wrong with Shaun's approach. Check out the wrap() function discussed here:
  16. i Don't really understand what I'm supposed to be seeing in the codepen and I can't dissect all that code, however the following throws some big red flags: function changeImage() { console.log('changeImage') setTimeout(function () { for (var i = 0, l = images.length; i < l; i++) { if (images.style.opacity > 0 && images.style.opacity < .9) { images.style.opacity = 0; } } }, 25); } var fp = TweenMax.staggerTo(images, .1, { opacity: 1, immediateRender: true, onComplete: function () { this.target.style.opacity = 0; } }, .035); var sp = TweenMax.fromTo('.image-sequence', 3, { x: '60%' }, { x: '-30%' }); tl.add([fp, sp], 0); tl.add(['a', changeImage], tl.duration() * .2); tl.add(['b', changeImage], tl.duration() * .99); It appears you want to call the changeImage function at a precise time in the timeline, but then you are using setTimeout to change the opacity. setTimeout is not very accurate and is not at all synchronized with gsap. Is there somewhere you have gsap setting the opacity and it is failing? gsap has no control over functions or tasks that are called to execute outside of its realm.
  17. ok, I think i found it. First, your fromTo() wasn't really necessary here as your from and to values are identical. TweenMax.fromTo("#slider", 2.2, {width:this.target._gsTransform.x}, {width: this.target._gsTransform.x, ease:Power0.easeNone}) However, it's really not the cause of the problem and it was technically working. If you look in dev tools you will see that the #slider element has inline style for width being updated appropriately. But the visual changes were not being rendered. Why? Because while GSAP was tweening the width inline style, the #slider also had a width attribute set to 0 which was overriding the style. Notice there are 2 widths used below: <rect id="slider" style="color: rgb(0, 0, 0); isolation: auto; mix-blend-mode: normal; shape-rendering: auto; image-rendering: auto; width: 548px;" fill-opacity=".99216" ry="13.254" height="26.509" width="0" y="2543.3" x="-1127.3" fill="#b2ec5d"></rect> So the trick is you need to tell GSAP to change the width attribute using the AttrPlugin (included in TweenMax) like so: TweenMax.set("#slider", {attr:{width:this.target._gsTransform.x}}) The demo below should work in FireFox In the future please don't include audio unless its necessary
  18. Carl

    New advanced stagger

    Thanks for the clear demos Craig! It appears the absence of a stagger value in a staggerTo() does cause a problem. To temporarily fix it you can add a 0 as shown below tl.staggerTo(boxes, 0.5, { y: -100, repeat: 1, yoyo: true, cycle: { delay: function(i) { return Math.abs(Math.floor(boxes.length / 2) - i) * 0.25; } } }, 0); I will escalate the issue. I'm sure a fix is on the way.
  19. Hi and welcome to the GreenSock forums, Thanks for the demo. Very cool. The slider appears to work fine for me. The green bar grows and the dragger thing moves with my mouse. Notes get bigger with increase in value. Here's a video from Mac Chrome https://greensock.d.pr/leyH4s Is there a particular browser you are seeing the error in? Or am I not understanding the problem properly? Let us know.
  20. Thanks for the demo. Things are much much easier if your dots are actual circles or shapes inside your SVG. Since they are divs outside your SVG you need to make sure you can work in a way that the coordinates translate well. I simplified things as best I could to show you this working in general. In this case its important to give your SVG a width and height AND also set the svg's position to absolute. Your divs were starting on the page BELOW the SVG. There's no way for MorphSVG to know where things outside the SVG are. Also I didn't really get why you were also tweening the top and left.... unless your intention is to move those things away from the path. hopefully this demo gives you a better starting point
  21. Carl

    pausing a timeline

    The vast majority of the demos we use show GSAP animating the CSS properties of DOM elements. GSAP can animate any numeric property of any JavaScript object which is why it also works with canvas (easeljs, pixi, three.js, etc). When working with Animate CC (easeljs) you need to just make sure you are animating properties that exist. That documentation for DisplayObjects is really good to keep handy. Its important to note though that the GSAP syntax for timelines and tweens is EXACTLY the same regardless of what you are animating and where it is rendering. Yup That's tricky, unfortunately their is no audio synching in Animate CC (for html5 output) So even though you may see a sound wave in your timeline and be able to roughly visualize and set up where animations can begin and end... there are no guarantees and its far from perfect.
  22. Carl

    pausing a timeline

    Pretty sure with EaselJS objects you have to set scaleX and scaleY independently... they don't have a scale property. For a test do: this.myInstanceName.scaleX = 2 // will work this.myInstanceName.scaleY = 2 // will work this.myInstanceName.scale = 4 // probably won't work
  23. Carl


    Yeah, I'm confused for the same reasons as Dipscom. The one thing that jumps out as a red flag is this: rotateSkeleton = tl.staggerTo(images, .1, { opacity: 1, ...}) This means every time your function is called you are putting a NEW staggerTo() on the end of the tl timeline. Your tl timeline is just getting longer and longer and longer each time
  24. Carl

    pausing a timeline

    var tl3 = new TimelineMax({ yoyo: true, repeat: -1 }); tl3.to( '#div3', 3.5, {scale: 2} ) .addPause( 3.5, function(){ setTimeout( function(){ tl3.play(); }, 2000); } ) Yes, that timeline uses a setTimeout() which is 1) generally not reliable 2) not synchronized with the rest of GSAP's tick (or heartbeat) Additionally the function that calls the setTimeout takes some extremely small amount of time to execute, but after hundreds of repeats that time will add up. I would vote for the tl1 or tl4 aproaches.