Carl last won the day on May 22

Carl had the most liked content!

Carl

Administrators
  • Content count

    8,719
  • Joined

  • Last visited

  • Days Won

    512

Everything posted by Carl

  1. Carl

    Can GreenSock help reduce jitter in my Parallax?

    Sorry, not really sure what to tell you. I didn't see any animation in the demo and I'm not at all familiar with basicScroll.js so I don't what it's doing under the hood. I'd guess that the majority of high-end sites that have scroll-driven animation are using GreenSock with ScrollMagic. ScrollMagic hasn't been actively developed (or supported) for awhile but I'm confident it can handle what you need to do for this project and GSAP is highly optimized for performance.
  2. Carl

    Delay on animation start when updating timeline

    In that case I would recommend re-building your entire timeline. It gets too complicated to remove a set of staggered tweens, create a new set, insert them into the timeline and then adjust when the other animations (like ".nav") should start. I would create another function called "build new timeline" and call it whenever you need a new timeline. This is a comprehensive article (with videos) explaining how to use functions to build timelines and the many advantages: https://css-tricks.com/writing-smarter-animation-code/
  3. Carl

    Delay on animation start when updating timeline

    Hi and welcome to the GreenSock forums. Thanks for the demo. It is very helpful. The problem is that each time you call setSlides() you are adding a new set of tweens (via staggerFrom) to the end of the timeline, thus increasing the amount of animations in the timeline and the duration. Open the demo below in a new browser window (edit on codepen), open the console and resize the window (horizontally) to see the console logs A solution here is to clear() the timeline BEFORE adding the new tweens. tl.progress(0).clear(); tl.staggerFrom($('.screen-slides div'), .5, {x: '-100%' }, 0.1) Resize the demo below horizontally and you will see that the duration does not change. *note: If you resize vertically the duration will change because the vertical height determines how many divs you append which affects how many staggered animations are inserted.
  4. Thanks for the demos. There were 2 issues. When you add tweens to a timeline, they naturally play one after the other. Your timeline tweens were set to repeat infinitely so technically the first tween never ended and the second tween never would play. Those demos were using a VERY old version of TimelineMax. In recent versions TimelineMax detects infinitely repeating tweens and will put the NEXT tween after the first iteration of the previous tween. By using a position parameter instead of delay, I can tell each tween exactly when to start regardless of other repeating tweens:
  5. Carl

    Perspective - Safari Issues

    Great stuff, Jonathan. Thanks for sharing.
  6. Carl

    Rendering Lags in Safari

    I don't think the problem lies in GSAP or staggered animations. When you click you are using SplitText to break that text into characters and words and then inject 100+ new DOM nodes (with their own inline styles) into the DOM. In addition, there is also logic that needs to run to preserve the styling of nested tags like <span>, <strong> etc. All that has to happen before any animation comes into play and THEN the staggered animation needs to create 100 or so more from() tweens, which involves assessing and recording start and end values. And to make matters a bit worse, by using 3D transforms, each of those 100 or so nodes need to be layerized / sent to the gpu. I suspect that's a lot of work for browsers to do instantly. I'm not quite sure why Safari takes more time than other browsers, but I don't think this is a problem inherent to staggered animations. My guess is Its more related to using SplitText, the amount of text you are splitting and the amount of animations you are creating. My advice would be to split the text before you need to animate it if at all possible.
  7. Carl

    Perspective - Safari Issues

    Yeah, looks like a rendering bug in Safari. Have you tried replicating the effect with CSS only (no GSAP)?I'd start there and if it doesn't work maybe try submitting a bug to the safari team. Someone else around here may have some tips for you, but I'd suggest a forum more focused on general web dev issues like stackoverflow.
  8. Carl

    Synchronize .progress() with mousedown

    Hi Noturnoo, Thanks for the clarification. Much better! If I understand correctly, Sahil's demos should offer great solutions. If not, please let us know what needs to be different.
  9. Carl

    new random duration not affecting animation

    Thanks for the demo. When you create a tween it records a duration. When you update your timing value, the tween has no idea that is happening. It already has its duration. Our video about invalidate() illustrates how pre-recorded values do not get updated when you change the values of variables that were initially used to create the tween. https://greensock.com/docs/TweenMax/invalidate You can change the duration of a tween using the duration() method (if you have a reference to the tween: myTween.duration(6)) but since your tween is in a timeline, changing the duration of the tween for ".red" is NOT going to then move the position of the second tween in the timeline (".blue"). In this case I would suggest creating a new timeline when you need to change the duration. This can be handled with a function that you call whenever the duration should change for more info on functions that create and return timelines please read: https://css-tricks.com/writing-smarter-animation-code/
  10. Carl

    Synchronize .progress() with mousedown

    if you just want the animation to progress 1/10th on each press as your last code snippet suggested, you could do
  11. Carl

    Synchronize .progress() with mousedown

    I think it would be best if we avoided the technical terms (timeline, progress, setTimeOut). Just imagine I'm your client and I know nothing about Javascript or GSAP and you are explaining to me how this feature works. What do I see when the mouse is pressed on the button? What do I see when the mouse is released. What happens if I hold the mouse too long or not long enough? That sort of stuff. The point here is if you can describe how this is supposed to work, we can advise on the best implementation. I'm confident it won't be too hard.
  12. Carl

    Synchronize .progress() with mousedown

    Hi I'm not quite following what you mean by "synchronize tween progress with the hold button". Also I don't see a setTimeOut Can you explain the exact user interactions and the desired results? You can use a tween as a timer. If your tween has a duration of 2 seconds you can restart it on each press. When you release the mouse you can see if its progress() is less than 1 or you can check its time(). Again, I'm not exactly sure what you are trying to do, and I'm confused by the tween reversing.
  13. Carl

    How can I achieve this effect?

    Sorry, but unfortunately I don't have time to dig through that site to understand how they set everything up. I don't really use ScrollMagic at all so I'm not really sure what the best practices are for setting things up. If you have a reduced case of GSAP tweens getting janky, we'll certainly take a look and try to help. maybe some of these links from PointC will help you with setting up scroll-driven animations
  14. Sorry, I didn't see any animation on the link you provided. are you sure that is what I should be looking at?
  15. Hi and welcome to the GreenSock forums. Do you have a direct link to the site you are referencing? The link you supplied goes to pinterest and every time I click somewhere I get overlays and prompts to log in.
  16. Carl

    Animation SVG not responsive

    Hi and welcome to the GreenSock forums. One question: It should be animating alongside the outer line it should continue its animation What is it? I didn't see any animation in your demo and element.previousElementSibling appears to be undefined. Before building a function that creates animations for many elements based on dynamic values (like tlWidth-tlMargin) I would strongly suggest getting the animation to work on 1 element with hard-coded values. Personally, it would be much easier to troubleshoot a simplified version of this effect with less mystery and a clearer explanation of what the result should be.
  17. Alright Guys, I have a little challenge / question for you. I really want to be able to get SVG path d attribute data into a format that BezierPlugin can use. So given this string M0,0c0,0,14,184,157,184V86h173c0,0,105-3,105,93, I'd want either an array of all the x/y values of all the anchor and control points like [0,0,0,0,14,184,157,184,157,184,157,86,157,86,157,86,330,86,330,86,330,86,435,83,435,179] or an array of point objects (which ultimately would get passed to BezierPlugin) [{x:0, y:0},{x:0, y:0},{x:14, y:184},{x:157, y:184},{x:157, y:184},{x:157, y:86},{x:157, y:86},{x:157, y:86},{x:330, y:86},{x:330, y:86},{x:330, y:86},{x:435, y:83},{x:435, y:179}] The end goal is draw a continuous path in Illustrator, smack svg output into an html page, use the svg path for a Bezier tween. This video explains all this in glorious detail: Does raphael, or snapSVG or any other library offer a convenient conversion method? It seems that since the same curves can be represented each way it should be easy to convert 1 format to the other, right? I'm not looking to have a robust tool built that analyzes svgs and builds animations automatically, just a function that I can do convertPath(dPath) { ... //turn dPath string into an Array of anchor and control points return BezierPointData } //usage var bezierAnchorAndControlPoints = convertPath("M0,0c0,0,14,184,157,184V86h173c0,0,105-3,105,93"); Any help is greatly appreciated. Carl p.s: This mission was greatly inspired by Chris Gannon's DrawScript converter: http://gannon.tv/drawscript-to-gsap/ and I'd like to publicly thank Rodrigo for helping me get a good leap into Raphael.
  18. Carl

    timeline events following a function call

    Yup, Craig is exactly right. The techniques illustrated in that article will definitely help with this. When you call a function from a timeline its important to note that the timeline has no idea what is happening in that external function call. The function it calls could be injecting DOM nodes into the page, popping up alert()s, opening a modal, submitting data, retrieving data, or creating 5 hours worth of tweens. The timeline only tells the function to run and continues playing as it was. In some cases you may want to pause the timeline after a call() and then use the function to tell the timeline to play() again when its done "doing its stuff". Again, in your case as Craig pointed out, you can actually put the animations that your function creates into the timeline. I provided the demo below in a similar discussion. Note that there are functions that create animations and those animations are returned to (placed into) the timeline via add(). The article referenced above explains this in great detail.
  19. Hi, In the docs you referenced there is a note about this exact scenario IMPORTANT: There is no way to get pixel-perfect hit testing for non-rectangular shapes in the DOM. hitTest() uses the browser's getBoundingClientRect() method to get the rectangular bounding box that surrounds the entire element, thus if you rotate an element or if it's more of a circular shape, the bounding box may extend further than the visual edges. IE8 (and earlier) is not supported because hitTest() requires element.getBoundingClientRect() which is in all modern browsers. Unfortunately, that isn't something that can be easily solved at this time. However the following thread has a bunch of demos (mostly by @OSUblake) that illustrate a number of techniques that you may find interesting and worth exploring further.
  20. Carl

    Use with Scrollmagic and JS

    I just did the same thing I always do when a ScrollMagic thing comes up, goole: pointc scrollmagic loop
  21. Carl

    Use with Scrollmagic and JS

    Here is another demo that @PointC created that shows the power of generating animations for ScrollMagic with loops
  22. Carl

    Multiple timeline event calls but only one action

    I'm not the right person to explain this. But this can mean different things depending on where it is used. The example below shows calling the same function but setting different values for the scope aka "what this refers to" var age = 10; var bob = {age:20}; var tl = new TimelineLite() tl.call(myFunction, [], this) // when scope is this age is 10 tl.call(myFunction, [], bob, "+=1") // when scope is bob age is 20 function myFunction() { console.log(this); console.log(this.age); } will generate this log
  23. Carl

    Multiple timeline event calls but only one action

    Yup, functions don't take up any time in your timeline so if you insert them all at the same time, they will all fire at that time. You can use the position parameter to offset the placement of each call() https://greensock.com/position-parameter https://greensock.com/docs/TimelineMax/call() here is a very basic example of a function being called every second var tl = new TimelineLite() tl.call(myFunction, []) tl.call(myFunction, [], this, "+=1") tl.call(myFunction, [], this, "+=1") tl.call(myFunction, [], this, "+=1") tl.call(myFunction, [], this, "+=1") tl.call(myFunction, [], this, "+=1") tl.call(myFunction, [], this, "+=1") function myFunction() { console.log(tl.time()) } view demo with console open
  24. Carl

    monitor values in running timeline

    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.
  25. Carl

    Destroying and Reinitializing Timeline

    Nice work, Craig!