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. since you only have 2 buttons you can probably get away with just resetting the menu you don't want to show and restart the one you do want to show like //cold button event listener coldButton.addEventListener('click',e=>{ showHotMenu.pause(0) showColdMenu.restart() }); //hot button event listener hotButton.addEventListener('click',e=>{ showColdMenu.pause(0) showHotMenu.restart() }); As you get more advanced it might look nicer to reverse the currently open animation. See this post from @OSUBlake
  2. Hi Shaka, It sounds like you may be referring to a Single Page Application (SPA) Definitely do some google searching on those with GSAP. You may also need some other framework that was designed to handle state changes and such like React / Vue / Angular These 2 threads may help you get started
  3. Carl

    Morph two SVG's

    with those demos, its clear PointC is the one doing the heavy lifting around here
  4. Carl

    Continuous Loop

    Hi Layne, Welcome to the GreenSock forums. Please read: https://greensock.com/modifiersPlugin The section Carousel Wrap has a demo that should help.
  5. Hi Wyne, welcome to the GreenSock forums. If you open up Dev Tools and inspect the site you will see that the majority of the fancy background visuals are rendered using HTML5 canvas You can also go to the network tab in dev tools and look at the source of this js: http://brightmedia.pl/js/main.min.js Dev tools will make it pretty / readable. Even with the code readable it could take quite some time to reverse-engineer what they are doing. If you are not familiar with canvas, I would strongly suggest you use DrawSVGPlugin which makes it SUPER easy to reveal SVG strokes in a wide variety of ways https://greensock.com/drawSVG
  6. Carl

    Repeat / seek label

    Hi agonty, I really don't understand what you mean by When I use .seek('two') it jumps to .addPause(). it was very nice for Mikel to create a demo for you, can you explain how seek('two') isn't working as expected even without adding and removing the pause. var action = new TimelineMax() .addLabel('one') .to('#green01',1,{x:100}) .to('#green02',1,{x:100}) .addLabel('two') .to('#green03',1,{x:100}) .to('#green03',1,{x:0}) .addPause("+=1", again); function again(){ action.seek('two'); } The code above makes the last 2 tweens repeat forever as I would expect: If you need to edit that demo to replicate your issue, feel free.
  7. i would suggest checking out the docs on staggerTo: https://greensock.com/docs/TimelineLite/staggerTo() It will help you reduce your code. i think for what you are doing you would be just fine playing and reversing the same timeline, but if you want 2 separate timelines I would suggest calling functions that create those timelines when you need them. Having 2 timelines restart() at the same time on the same elements will not work well. Please see this article: https://css-tricks.com/writing-smarter-animation-code/ I didn't spend a lot of time trying to match the timing and all the settings, but this should give you something to start with:
  8. Hi TEQQED Please see in PointC's example this code: var tl = new TimelineMax({repeat:-1, repeatDelay:0.5, yoyo:true}); tl.staggerFrom(".lineChild", 0.75, {y:50}, 0.25); repeat:-1 means repeat forever. You can change it to 1 to have it repeat once. That means the text will come into view and then leave. If you want it to just come into view just remove all the code related to repeating (repeat, repeatDelay, and yoyo). var tl = new TimelineMax(); tl.staggerFrom(".lineChild", 0.75, {y:50}, 0.25);
  9. Hi and welcome to the GreenSock forums. The trick to scroll-driven animations is first to understand that every tween or timeline has a progress() which returns or sets a number between 0 and 1 that represents how complete the animation is. progress:0 = not complete at all progress: 0.5 = half progress:1 = totally complete You can set the progress of an animation using myAnimation.progress(0.5) // make animation jump its halfway point. You can pass in any value between 0 and 1 that you want and take it from anywhere: the mouse position, a slider component, scroll position or anything you can think of this demo shows how you can set the progress() of an animation using an HTML5 input slider: Here's an old demo using a lot of jQuery to change the progress based on scroll position Here's a demo from @OSUblake Using canvas the same concepts can apply. Create a timeline full of a bunch of animations. As the user scrolls generate a number that gets normalized and passed into that animation's progress()
  10. hmm, the video you linked to is for helping people with a very specific and somewhat common scenario of having competing from() tweens on the same properties of the same object. For TimelineLite.set() and TimelineMax.set() immediate render is set to false by default (as long as the start time isn't 0) If a set() is scheduled to run at 4 seconds into the timeline it will not render immediately at a time of 0. The engine is smart enough to know that a set() at 4 seconds should wait until its scheduled time. Please change your demo to use this code: TweenLite.set("#demo", {visibility:"visible"}) // it is important to set immediateRender:false when multiple from()-based tweens are animating the same propreties of the the same object. var immediateRender = true; //switch to true to see the difference var tl = new TimelineLite(); tl.set(".green", {opacity:0}, 0) .set(".green", {opacity:1}, 2) .set(".green", {opacity:0}, 4); You'll see that the green item starts with opacity 0, switches to opacity 1 at 2 seconds and goes invisible again at 4 seconds all as expected. There is no need to change the default value of immediate render on any of those set()s in this situation.
  11. Please elaborate on: "I need two sliders synchronized by GSAP," Do you have a simple demo of 2 sliders set up? Or an example somewhere on an existing site? Can you explain how they should be synchonized? Please keep in mind that our support is focused on the GSAP API, and although I'm not really understanding what it is that you want, it sounds like something that needs a fair amount of custom-coding unrelated to GSAP. Again, a demo or some type of example would help.
  12. Sorry, I'm a bit lost here and not really understanding what all your code is supposed to do or what you mean about using call() to separate your end animations. If you put all your animations in master, then I don't think you really need to be calling external functions when the animation is playing. If I understand correctly I cannot extend my tl. tween outside of the bannerAnimation() function. if you define var tl = new TimelineLite() inside a function, then yes, you can not access tl outside that function.
  13. Hi Therddlr, Glad you are eager to learn.SVG definitely has its quirks, but as Jack mentioned, GSAP does a lot to normalize behavior. I'm sure you will do fine with GSAP. If you want to make your head spin a bit, read through the SVG Gotchas thread. Some great info in here:
  14. The SVG spec does not officially support 3D but you can get the behavior you want using CSSPlugin.useSVGTransformAttr = false; however this is not recommend as explained here:
  15. more details here: https://greensock.com/svg-tips
  16. Hi therddlr, I think you may be misunderstanding what x:"40%" is supposed to do. To be clear it will translate the target a distance based on 40% of its own width, not to a position equal to 40% of its parent's width. I forked your original demo and used to() tweens instead of set() so that you can see what is happening
  17. Hi and welcome to the GreenSock forums, Yes, svg elements can follow an SVG path with the help of the MorphSVG plugin. Please see if this helps: https://greensock.com/path-animation Feel free to fork the demos and add your own svg code.
  18. Hi and welcome to the GreenSock forums, Thanks for the demo. Please try var mummudRepeat = new TimelineMax({repeat:-1}) var mummud=$('#mummud > g path'),mummudArray=mummud.toArray(); mummudArray.sort(function() {return 0.4-Math.random()}); mummudRepeat.staggerTo(mummudArray, 0.2, {opacity:0, repeat:1, yoyo:true}, 0.4) by repeating each staggered tween with yoyo:true each dod will fade out and then fade back in.
  19. Make sure you are targeting the clips right. With js you need the this keyword. var myClips = [this.mc1, this.mc2]
  20. Sorry, I'm not familiar with lottie.js or bodymovin', and they are not GreenSock products. This probably isn't the best place for questions about those tools. If you have a question related to the GSAP API, we'll do our best to help.
  21. Hi, Regardless you will want to store the instance names of all your MovieClips in an array and then use that array as the target of a staggerTo like var myClips = [mc1, mc2, mc3]; TweenMax.staggerTo(myClips, 1, {x:100}, 02); I'm not sure from your post if you are using ActionScript or JavaScript. They are both similar but it would help to know for sure for us to provide the best answer.
  22. note: edited the response above with files
  23. This is the best I can do for you right now: for (var i = 0; i < 200; i++) { var p = new lib.Particle(); this.addChild(p); TweenMax.to(p, 1, {x:400 + Math.random() * 400, y:400 + Math.random() * 400, delay:i * 0.01, repeat:-1}) } particles.mp4 please see the attached fla. it should be a good start. simple-particles.zip
  24. Carl

    Plinko Game

    For the most part, GreenSock is designed for animations that have known start and end states. With a plinko game the movement of the ball is always changing based on: x velocity, y velocity, gravity, friction and angle of collision with other objects. These types of animations are better suited for a physics engine which is what matter.js is. Your plinko demo uses matter.js and from what I can tell it is the right tool for the job. https://github.com/liabru/matter-js
  25. this question comes up quite a bit. the demos below each contain a looping sequence of blue, pink green divs fading in and out. they reach repeat 3 times but do something different on the last iteration. this demo shows how to stop an animation before the final green frame fades out on the last frame: This one plays a custom ending animation after the third iteration for the most flexibility and code-reusability combine this method with what GreenSock suggested about using functions to create each individual part of your animation.