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. hi and welcome to the GreenSock forums. tween.totalProgress(1) will force the tween to complete. Did you try it and get unexpected results? If you need something else, please feel free to provide a demo http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/
  2. a little more info on the subject:
  3. great conversation guys: Everything you wanted (and more) was once available in SWF files. However, since the Flash Player was not "an open web-standard" and didn't work so well on mobile it got destroyed. https://en.wikipedia.org/wiki/SWF https://en.wikipedia.org/wiki/Adobe_Flash_Player
  4. Hi and welcome to the GreenSock forums, Thanks for the demo. Before you get into having one timeline to play the "in" animation and another for the "out" animation, you should probably re-structure things a bit. Currently you are adding NEW tweens to the same timeline on each mouse event. So your tl and timeline timelines keep getting longer and longer with new tweens added to the end on each mouse event. Please see this pen where I added some logs (open the console) Spend some time, studying @Jonathan's example here: You will see that each nav item has its own timeline. That timeline gets either played or reversed on each event. New tweens are never added after the timeline has been initially created.
  5. As Oliver pointed out, If two tweens are trying to control the same property of the same object at the same time they will literally be fighting for control and one tween must win. The engine by default kills the pre-existing tween. Once it's killed it can not play again. You can set overwrite:"none" on the second tween to prevent the first tween from being killed. tl.to(heroimage, 3, { x:"+=400",y: "-=100",ease: Power3.easeOut }); tl.to(heroimage, 4, { x:"+=20",y: "-=20",ease: Power0.easeNone, overwrite:"none" },"-=0.5"); More info on overwrite settings from the TweenLite docs overwrite: String (or integer) - Controls how (and if) other tweens of the same target are overwritten. There are several modes to choose from, but "auto" is the default (although you can change the default mode using theTweenLite.defaultOverwrite property): "none" (0) (or false) - no overwriting will occur. "all" (1) (or true) - immediately overwrites all existing tweens of the same target even if they haven't started yet or don't have conflicting properties. "auto" (2) - when the tween renders for the first time, it will analyze tweens of the same target that are currently active/running and only overwrite individual tweening properties that overlap/conflict. Tweens that haven't begun yet are ignored. For example, if another active tween is found that is tweening 3 properties, only 1 of which it shares in common with the new tween, the other 2 properties will be left alone. Only the conflicting property gets overwritten/killed. This is the default mode and typically the most intuitive for developers. "concurrent" (3) - when the tween renders for the first time, it kills only the active (in-progress) tweens of the same target regardless of whether or not they contain conflicting properties. Like a mix of "all" and "auto". Good for situations where you only want one tween controling the target at a time. "allOnStart" (4) - Identical to "all" but waits to run the overwrite logic until the tween begins (after any delay). Kills tweens of the same target even if they don't contain conflicting properties or haven't started yet. "preexisting" (5) - when the tween renders for the first time, it kills only the tweens of the same target that existed BEFORE this tween was created regardless of their scheduled start times. So, for example, if you create a tween with a delay of 10 and then a tween with a delay of 1 and then a tween with a delay of 2 (all of the same target), the 2nd tween would overwrite the first but not the second even though scheduling might seem to dictate otherwise. "preexisting" only cares about the order in which the instances were actually created. This can be useful when the order in which your code runs plays a critical role.
  6. Great question. I can't recommend any specific books, but I'd suggest starting with a google search of 12 basic principles of animation. You'll find plenty of books and tutorials that cover concepts that will definitely help you make your animations look better. One thing that is critical for applying those principles to your animations using the right ease. Be sure to watch the videos here: https://greensock.com/customease
  7. hi and thanks for the clean demo. The trick is to use loadAnimations's onComplete callback to tell another animation to play. something like
  8. Congrats on the awards. It's really cool to see how much you have learned and applied to your work. Thanks for the nice post I'm sure the folks who have helped you along the way will appreciate it.
  9. Carl

    Drag svg along the path

    Please see this post and the demos from @OSUblake as for knowing when the drag is at the end, you could probably run some code to check if the current x and y of the object are within a specified range of the end coordinates. Very little of this functionality is built into GSAP and as you will see the custom logic and calculations are all very complex. Not something we can really provide support for. Good luck with your project!
  10. I think the demos and discussion here will help: and for more "back-story" from @OSUblake see: https://greensock.com/forums/topic/13681-svg-gotchas/?page=2&tab=comments#comment-72060
  11. hmm, i didn't have any problem using scrollTo on a div in FireFox: As for scrolling the body, it's pretty standard procedure to scroll the window and I'm not sure what the advantage of scrolling body would be. I think the solution lies in tweaking some css. Adding html to your rule seems to help, but then you get a weird extra scrollbar gutter.
  12. Carl

    Toggle animation state?

    Welcome to the forums. Thanks for the demos. You were pretty close. It looks like you were just using one timeline and were either reversing it or adding new tweens to the end of it. One way to handle this is to create an animation for each element each time you click on a new rectangle > if the currentAnimation is the same as the animation for the element you just clicked, then ONLY close that animation (reverse it) or else if the currentAnimation is for another element, close the currentAnimation, play the animation of the item you clicked, and re-assign your currentAnimation variable it probably looks better in code: var currentAnimation = new TimelineLite(); rectangles.forEach((el) => { var tl = new TimelineLite({paused:true}); tl.to(el, 0.5, { width: "15rem" }) el.animation = tl; el.addEventListener("click", (event) => { if(el.animation == currentAnimation){ el.animation.reverse(); } else { currentAnimation.reverse(); el.animation.play(); currentAnimation = el.animation; } }) })
  13. thanks for the demo. The trick is to use your css to set the visibility of the SVG to hidden, and then in your js before the tweens set the visibility to "visible" css svg { visibility:hidden; } js TweenLite.set("svg", {visibility:"visible"});
  14. I suspect this post and demos from @PointC will have some pointers for you.
  15. SVGOMG is pretty popular: https://jakearchibald.github.io/svgomg/ But I think for the most part people just learn their own ways to hack through the weird output of whatever app they are using. @PointC documented some of his workflow tips here:
  16. Thanks for the demo. Not seeing a difference in Safari 12. What version are you using? *for others testing: click the bottle.
  17. Hi and welcome to the GreenSock forums, When you specify callbacks you should not include any () as that will tell those functions to execute immediately. You just pass the name of the function like: let tl = new TimelineMax({ onStart: myOnStartFunction }); function myOnStartFunction(){ // do stuff } In the case where you need to pass parameters, you do that separately as an array console.clear(); var tl = new TimelineLite({onStart:console.log, onStartParams:["start"], onComplete:console.log, onCompleteParams:["complete"]}) tl.to("h1", 3, {x:200});
  18. Hi I wasn't able to find an example of that, but you can study a few individual pieces and then try to glue them together. For revealing a path, you'll want to use DrawSVGPlugin: https://greensock.com/drawSVG (for Club members) For revealing a stroked path you'll want to do use DrawSVG on a mask that reveals that dashed path: demo For controlling an animation on scroll study ScrollMagic (not a GreenSock product)
  19. Hi and welcome to the GreenSock forums, Thanks for the demo. It looks like you have a good handle on the GSAP API. I really don't understand ScrollMagic enough to be able to help you. It's not a GreenSock product. From the Github page it appears it is being developed again. For support try: https://github.com/janpaepke/ScrollMagic/issues If you have GSAP questions we'll do our best to help.
  20. thanks for the demo. I didn't have time to validate all your logic for the dimensions. It seemed odd that the responsive animation didn't change size on window resize, but I did make it so that you could resize the window and the animation would not break. I think the issue was that you were creating additional new timelines on each resize while the previous timeline was still running. This was throwing off the start values of your animations. in my example I bring the playhead of the timeline back to a time(0), clear() the timeline and put new tween inside it //make the timeline once outside your function var tl = new TimelineLite(); animatedSprite(); function animatedSprite() { var animationElement = document.querySelector(".animation"); var maskWidth = document.querySelector(".animation-mask").clientWidth; var animationTotalFrames = 10; animationElement.style.width = parseInt(maskWidth * animationTotalFrames) + "px"; var animationElementWidth = document.querySelector(".animation").clientWidth; var spriteRealWidth = parseInt((animationElementWidth - maskWidth) * -1) + "px"; //set the time to 0, clear the timeline and rebuild it tl.time(0).clear(); tl.to(animationElement, 1, { repeat: -1, x: spriteRealWidth, ease: SteppedEase.config(animationTotalFrames - 1) }); } Please see fullsize demo here.
  21. Hi and welcome to the GreenSock forums. thanks for the demo. It seems you were setting this.x as the target of your tween bad TweenMax.to(this.x, 0.4, {scale: 2} ) TweenMax.to(this.y, 2, {scale: 2} ) good TweenMax.to(this, 0.4, {x:400} ) TweenMax.to(this, 2, {y:400} ) obviously, you'll have to use the right values for x and y. Just wanted to show you how to get the tweens working.
  22. Can you send me a link to the page where you tried my suggestion? It would be really helpful to be able to look at it and see if we can figure out why that code isn't working. Is netlify producing an error that says it doesn't allow you to load GSAP? Are you able to upload TweenMax to your site along with your other JavaScript files? Perhaps they don't like things that come off of a cdn. Just guessing here, I haven't used free hosts in a very long time, but it just seems very strange that a host would feature react, but not allow GSAP. Kind of puzzled.
  23. Hi and welcome to the GreenSock forums, It's really tough to guess what is going to work in your application. A small demo would really help as explained here: Working with callback scope can be tricky until you see it in practice. In the world of GSAP the scope of a callback is the tween or timeline that is calling the callback. If a tween calls an onComplete callback, then the keyword "this" inside that function is going to refer to that tween. If you want "this" to represent some other object, then you need to specify that in the callback scope. Please study this example and see if it helps var myObject = { x:1234567 } TweenLite.to("h1", 1, {x:100, onComplete:tweenScope}); TweenLite.to("h3", 2, {x:100, onComplete:myObjectScope, onCompleteScope:myObject}); function tweenScope(){ // this = the first tween console.log("the duration of this tween is " + this.duration()); //1 } function myObjectScope() { // "this" = myObject console.log("the x of myObject = " + this.x) //1234567 } View on codepen and open the console I suspect in your case you want a scope of mainComponent or this. also, I don't think you want the () when defining your callback usually bad because close() will execute immediately onComplete:mainComponent.close(); good onComplete:mainComponent.close;
  24. Excellent! I was just about to take a stab. Very glad you found a solution with 1 timeline. Definitely the way to go.
  25. Hi and welcome to the GreenSock forums, Sorry, I'm not really familiar with Netlify, but I'm very surprised to hear that a host would not support GSAP. Are you saying they prohibit you from loading TweenMax from the cdn like: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> As long as you can edit html on your site you should be able to put this on your page <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> <script> TweenMax.to("body", 5, {backgroundColor:"red", scale:0.5}); </script> GSAP is used on over 7,000,000 sites and I've never heard of a host not allowing it. That is very strange. Perhaps I am misunderstanding something.