Jump to content
GreenSock

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

Leaderboard

Popular Content

Showing content with the highest reputation on 06/27/2019 in all areas

  1. There isn't a timeline visualizer tool nor do I think there are plans for one in the future. See this thread: If you really want to learn to write modularized code that's super easy to maintain and make quick changes, check out this post by the mighty @Carl that I mentioned above: https://css-tricks.com/writing-smarter-animation-code/ Happy tweening.
    3 points
  2. Bingo! Thanks so much, both the Codepen and the link really help. Using immediateRender: false on just the second fromTo() does exactly what I need: https://codepen.io/tobynicholas/pen/oroqKM
    2 points
  3. PS https://greensock.com/immediateRender
    2 points
  4. With multiple fromTo() tweens, the last one in the sequence will be where the target will sit when the code loads and the timeline is paused. Take this code for example: var tl = new TimelineMax({paused:true}); tl.fromTo(target, 1, {x:100}, {x:200}); tl.fromTo(target, 1, {x:200}, {x:300}); tl.fromTo(target, 1, {x:300}, {x:400}); That target will be sitting at x:300 until the timeline plays. At that time it will jump back to 100 and play the tweens in sequence. https://codepen.io/PointC/pen/dBZmzJ You can override that with immediateRender:false on the 2nd and 3rd tweens. Does that make sense? Happy tweening.
    2 points
  5. That's exactly what i need. I knew I needed a loop, didn't know how to make it. Thanks a lot
    2 points
  6. Is this what you need? https://codepen.io/PointC/pen/agVqJe Happy tweening.
    2 points
  7. Hi @shouldaStayedInside, Welcome to the GreenSock Forum. If you do not need a blur effect, this can also be a solution. https://codepen.io/mikeK/pen/GbOORx Happy tweening ... Mikel
    2 points
  8. I'm not 100% sure what you're trying to do, but to animate filters like that you'll need to use the attr plugin. (auto loaded with TweenMax) Here's a really basic example: https://codepen.io/PointC/pen/gNXXXQ Hopefully that helps. Happy tweening.
    2 points
  9. Hi @troymartz Welcome to the forum. Are you offering a job here? I ask because you posted in Jobs & Freelance, but you said: It was unclear to me if you were just looking for some guidance or hiring a freelancer to help you. Any details you could post in regards to that would probably give you the best chance of a response from qualified GreenSockers. Thanks and welcome aboard.
    1 point
  10. Welcome to the forums, @khagedra. Unfortunately, ScrollMagic isn't a GreenSock product and we don't support it here. We really try to keep these forums focused on GSAP-specific questions. It looks like the ScrollMagic author does offer paid support which you can learn about at https://support.scrollmagic.io/. If you have any GSAP-specific questions, we'd love to help. Good luck with your project!
    1 point
  11. Unfortunately, ScrollMagic isn't a GreenSock product and we don't support it here. We really try to keep these forums focused on GSAP-specific questions. It looks like the ScrollMagic author does offer paid support which you can learn about at https://support.scrollmagic.io/. If you have any GSAP-specific questions, we'd love to help. Good luck with your project!
    1 point
  12. You'd want to look at the isActive method to prevent clicks when the animation is playing. https://greensock.com/docs/TimelineMax/isActive() You could break the timeline into two or use an addPause in the middle. We've had a few discussions about different eases for reverse. That's entirely up to you. Loops are your friend. Happy tweening.
    1 point
  13. You could also use set() and to() tweens if you like. Some people find that a bit less confusing than from() tweens. I'd also like to point out the yoyo and repeat properties would allow you to use less tweens in your timeline. So your example could be written like this: tl1.fromTo('#green', 1, {opacity: 0}, {opacity: 0.75, yoyo:true, repeat:1}); Happy tweening.
    1 point
  14. On paused timelines with from(), fromTo(), staggerFrom(), staggerFromTo() tweens, immediateRender is true. Setting it to false is your best option. There were some recent changes between 2.1.0 and 2.1.2 regarding this default behavior. More details: https://github.com/greensock/GreenSock-JS/releases/tag/2.1.2 Happy tweening.
    1 point
  15. Sounds like you haven't loaded the ScrollMagic GSAP plugin. <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
    1 point
  16. It's because you're setting the 0.5 in the default "stagger" place. Have a look at the docs for a full listing of the properties. // Instead of this .staggerFromTo(second.children, 0.7, { opacity: 0, yPercent: 50 }, { opacity: 1, yPercent: 0, ease: Sine.easeOut, stagger: 0.1 }, 0.5) // You want this .staggerFromTo(second.children, 0.7, { opacity: 0, yPercent: 50 }, { opacity: 1, yPercent: 0, ease: Sine.easeOut, stagger: 0.1 }, null, 0.5)
    1 point
  17. PS In case you haven't seen it — you can use GSDevTools. It's not quite the same as the visualizer from the video, but makes testing and debugging quite a bit easier. https://greensock.com/gsdevtools Happy tweening.
    1 point
  18. Yeah it would be a lot easier to understand if you got rid of all the graphics for now and just simplified it to the basic elements you are having difficultly with. Once you get it working then you can add them back in.
    1 point
  19. Yeah, I wish we had the resources to help with everything, but there are only so many of us and we need to focus on GSAP questions and problems. Just to be clear on your project — setting a duration for the scene will make your life easier because the enter and leave triggers won't be sitting on top of each other. So you could do something like this: https://codepen.io/PointC/pen/RzLBQq Hopefully that helps a bit. Good luck and happy tweening.
    1 point
  20. @Jonathan has written about this quite a bit. Here's one of his many posts about loading assets before the timeline starts. You can use a brightness filter instead of opacity. Here's a basic starter example from a different thread. https://codepen.io/PointC/pen/MQvooQ There are also loads of filters available to you. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter <feComponentTransfer> looks like it could be a lot of fun in your project. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComponentTransfer Happy tweening.
    1 point
  21. Haha. I get a kick out of watching people demand free stuff, and this "cultural thing" comment definitely takes the cake. 10/10 This is why we can't have nice things.
    1 point
  22. @PointC, here is the final result, Craig if you're interested One moment in the middle is a bit too harsh but, probably, will be able to smoothen it a bit with timing for production. Thanks for your help once again
    1 point
  23. Hi @mishunov If you're talking about circles or rectangles, this is pretty easy. Using the attribute plugin and a from() tween, you can animate the cx/cy of circles or the x/y of rectangles. Paths are a bit different. If it were me, I'd loop through using .getBBox and make a tween or timeline from that data. Here's a simple demo with circles, rectangles and paths to show you one way it could be done. Hopefully that helps. Happy tweening.
    1 point
  24. Using a little vector math, this is actually pretty easy to do. All you need to do is scale a vector. It's too bad JavaScript can't do operator overloading like a lot of other languages, because this could be a one-liner. var newPoint = (point - center) * scalar; Vectors are like points, but they have a definite direction and length, so the ratio between the x and y values is constant. This means you don't have to figure out the angle for a position. If you know the length of the x or y axis, you can figure out the other axis by multiplying it by a ratio/scale. If you've ever calculated an aspect-ratio for an element, like during a screen resize, it's the same concept. You can see how it works in this demo. As an element moves away from the center, the rate of change between the x and y axis remains constant. So to pull this effect off, all you have to do is multiply the difference between an element and the center by some scalar value. Check it out. It creates a pretty cool effect. It's pretty uniform right now, but you could add some randomization to it. Changing the stagger value can dramatically change how the explosion looks.
    1 point
  25. Hello fellow GreenSockers! I thought i would add my SVG gotcha since this type of thing comes up at least one time a day regarding SVG with GSAP. This is regarding animating SVG elements within an SVG <defs> tag. If you are trying to animate elements within an SVG <defs> element, then you should use the GSAP AttrPlugin. If your SVG elements are not within a SVG <defs>, <symbol>, or <mask> element .. than you should use the GSAP CSSPlugin like your already doing! Which is the default when tweening CSS properties in GSAP. GSAP is smart enough to know when to use what. But for attributes, wrap your attributes in the attr:{} object when using the GSAP AttrPlugin If you are animating SVG elements and they are nested inside a SVG <defs> element. then you need to animate those nested graphical elements with the GSAP AttrPlugin, instead of the GSAP CSSPlugin. The reason being is that Firefox will honor the SVG spec and will follow web standards whereas webkit browsers like Google Chrome and Apple Safari will allow certain non-standards and non-spec behavior. But will later remove that non-standards and non-spec behavior to line up with the spec, further confusing users / developers. SVG Graphics elements are considered the folllowing: <circle>, <ellipse>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <use> That is why i always debug and test in Firefox first knowing the expected behavior will line up with the spec, in this case the SVG spec. And then i debug webkit (Chrome and Safari), followed by debugging IE. Doing it that way I guarantee that HTML, DOM and SVG elements will behave according to the web standards, the spec, and cross browser. CSS is not directly rendered inside a SVG <defs> tag. That is why using the GSAP AttrPlugin works, since it animates the attribute values directly. Taken from SVG spec on the MDN (Mozilla Developer Network) website. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs <defs> SVG allows graphical objects to be defined for later reuse. It is recommended that, wherever possible, referenced elements be defined inside of a defs element. Defining these elements inside of a defs element promotes understandability of the SVG content and thus promotes accessibility. Graphical elements defined in a defs will not be directly rendered. You can use a <use> element to render those elements wherever you want on the viewport.The same goes for the nested elements within an SVG <symbol> element. So as rule of thumb when animating SVG, if the element your animating is within a SVG <defs> or <symbol> element , then please use the GSAP AttrPlugin. But if it is not nested inside a <defs> or <symbol> element, then you can use GSAP as usual, knowing that it will use the CSSPlugin instead. Hopefully this SVG gotcha can help other when using GSAP, especially for SVG. Happy Tweening
    1 point
  26. To have tweens run in parallel you need to insert them at the same point in time in the timeline. Where a tween is inserted into a timeline is controlled via the position parameter. You can read about this parameter in great detail in the TimelineLite.to() docs. The position parameter is used in many other methods like from(), staggerFrom(), staggerTo(), call() and more. In your example, you can have the second tween start at the same time as the first tween by adding it at a time of 0 like this .add(TweenMax.fromTo('#intro', .5, { backgroundPosition: "50% 0vh" }, { backgroundPosition: "50% 20vh" })) .add(TweenMax.to('#intro p.hint', .5, {autoAlpha: 0}), 0) this example shows you how to have two tweens start at a time of 0 AND where a label is placed var tl = new TimelineLite() tl.to("#redBox", 1, {x:550}) //add second tween at time of 0 seconds .to("#blueBox", 1, {rotation:360}, 0) //add a label called "end" at a time of 2 seconds .add("end", 2) // add two tweens at the "end" label .to("#redBox", 3, {scale:2, opacity:0}, "end") .to("#blueBox", 3, {scale:2, rotation:0, opacity:0}, "end") http://codepen.io/GreenSock/pen/youzL?editors=001
    1 point
×