Popular Content

Showing content with the highest reputation since 10/20/2018 in all areas

  1. 8 points
    An example of triggering animations with the Intersection Observer API. Notice how the handler only toggles the playback state of an animation. if (entry.isIntersecting) { // play animation } else { // pause animation } Your handler is adding the same animations to an already existing timeline, so it's getting longer and longer every time entry.isIntersecting is true. So maybe something like this. inView(entry) { if (entry.isIntersecting) { if (!this.state.firstInview){ TweenMax.to(this.sun, 4, {opacity: 1}) this.setState({firstInview: true}) } this.tl.play() } else { this.tl.pause(); } } componentDidMount() { TweenMax.set(this.sun, {opacity: 0}); this.tl = new TimelineMax({ yoyo: true, repeat: -1, paused: true }) .to('.sun-flare--1a', 1, { x:50}) .to('.sun-flare--2a', 1, { y:50, onComplete: () => console.log('TL-1+2 completed') }, 0) .to('.sun-flare--3a', 3.5, { y: 150, onComplete: () => console.log('TL-3 completed') }); } And your click handler isn't working because of the parentheses. That will immediately execute the function. // Bad <svg onClick = {this.clickHander()}> // Good <svg onClick = {this.clickHander}>
  2. 8 points
    The browser does bilinear scaling using 2x2 sampling. PixiJS can do bicubic scaling using 4x4 sampling, which results in a much smoother scale. I explain a little about how to set up here.
  3. 8 points
    Hey everyone I have another SVG quick tip for your text elements. If you need it to slice, explode, shatter or glitch, you may find this useful. I was recently working on a Halloween animation for a client and we needed to slash some SVG text into pieces. My first instinct was to convert the text to paths and slice it up in in AI, but this text needed to be dynamic so that would be a lot of work. I decided to place the text in a pattern element and create a group of polygons filled with that pattern. That allowed me to create the slashed pieces of text (the polys) and have them fall away. The text is easily changeable with the GSAP text plugin. It proved to be an easy and flexible solution Happy Hallowtween.
  4. 7 points
    An easy way to keep things random is to create a new animation when the current one finishes.
  5. 7 points
    Probably a displacement map. Here's a good thread in which @OSUblake has a cool shader example. If you search the forum (or Google) for canvas, Pixi or displacement maps, you'll find some cool stuff. Happy tweening.
  6. 7 points
    Hi @jp_uk81 There's a problem with the order in certain browsers. For example, Chrome reports the color first. element.style { filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 0px 14px); } My workaround, use CSS variables.
  7. 7 points
    The first part inside the object is key and second part is value, so you need to use ternary operator in value part. .to("#square", 1, {backgroundColor: window.innerWidth > 736 ? "red" : "yellow" }); Also, by declaring timeline outside of function you were adding all tweens to same timeline even though you won't be reusing them.
  8. 7 points
    Hi and welcome to the GreenSock forums. As far as I know there is no Motion Blur Plugin for GSAP, unless a new plugin was released and I didn't even heard about it This issue is most related with the hardware than anything else. I'm pretty sure that with a last generation quad core machine with some solid GPU this wouldn't be a problem, while with a mid-range phone is more noticeable. The main solution for this is make your animation shorter. If that is not an option you can use WebGL to render the image and animate it's scale: http://www.pixijs.com/ GSAP has a PIXI plugin, so you can use that to easily animate the scale of a PIXI Sprite, although the scale of a PIXI display object can be animated directly with TweenLite, without the use of the plugin: const mySprite = new PIXI.Sprite.fromImage("path/to/your/image.jpg"); TweenLite.to(mySprite, 10, {scale: 2}); Finally I'm curious of why you're using force3D: false in your pen, it should be true in order to send the layer to the GPU and perhaps get a better result: TweenMax.fromTo("#img", 10, { transformOrigin:'50% 50%', scale:1 }, { scale: 2, ease: Power2.easeInOut, force3D:true }); I've done a few things in PIXI, including long, full-screen image animations with very good results, so perhaps you can give it a try. Here you can find some examples to get you started: https://pixijs.io/examples/#/basics/basic.js Finally if you want to try the bonus plugins in CodePen here you can find the links to use them: https://codepen.io/GreenSock/pen/OPqpRJ?editors=0010 Happy Tweening!!
  9. 7 points
    Hi Kerstin, You have pretty much answered your own question. And you have scaffolded your code in your example nearly all completely correct. First I have a question: is there any reason why you are doing a querySelectAll on your toggles? Is this because you plan to have several toggles? As to what you need to do to achieve your desired effect is simply to create the animation you want to play in your 'tlback' and change your click event to something like the following: // This really should be outside your forEach loop let open = false; function accordionToggle() { // Note the zero inside the method call, to make sure we always start the timeline from its start open ? tlback.play(0) : tl.play(0); // Toggle the open state to its opposite value open = !open; }
  10. 7 points
    I like that - a new tagline for GSAP
  11. 7 points
    If you can make it, GSAP can animate it. All that site is doing is animating a bunch of coordinates. A very simplified example.
  12. 7 points
    Hi @ainsley_clark, There are a lot of options. Here mine (using GreenSock TextPlugin) ... Happy tweening ... Mikel
  13. 6 points
    It doesn't continue from the wrong value, it does exactly what the code is telling it to do. You see, the first tween you create has no idea of what the second tween is doing so, once the second tween is done playing, the first one continues doing its thing as before. The values calculated in the first tween do not get altered by the second tween. The values on the second tween, however, are influenced by the first one. Refer to my first suggestion as to how to approach what you are trying.
  14. 6 points
    PS Check out my thread on circles along a path using stroke-dasharray. It's easier than creating all those individual circles. Happy tweening.
  15. 6 points
    Hi @Blake The morph plugin wasn't loading and you had a really old version of TweenMax. You'd also want to align the #plane group to the path. var motionPath = MorphSVGPlugin.pathDataToBezier("#dotted-line-path", {align:"#plane"}); Hopefully that helps. Happy tweening.
  16. 6 points
    I re-wrote the demo. I would say avoid assigning class to keep track of active elements, it gets messy and confusing real quick.
  17. 6 points
  18. 6 points
    Guys, there's no need to fight! Meet in the middle and become BFFs with custom elements/web components. Vue can actually compile components into web components. https://custom-elements-everywhere.com/ Preact and Vue using a simple store. React currently can't pass props to an element 🙄 Source for the animated icon. https://codepen.io/osublake/pen/42fcd8f6a6be8634c9fd261f811a3478
  19. 6 points
    Really? How strange. Do you actually use a class named "circles"? It doesn't appear to be the case. **The dangers of copy/paste coding** Always, always, always, young grasshopper, type your code.
  20. 6 points
    This might be somewhere else in your app. Can you create a simplified sample in https://stackblitz.com/ using just the sun component and all it's dependencies. It seems that you're not passing any props to it, so it shouldn't be a problem. Don't worry about the Morph SVG plugin, just use any other property like x, y, rotation, etc, so you don't expose your club member's plugin. The main point is to find out what is happening in the component did mount hook and how the intersection observer package is working with the child being passed, because in theory your code looks good and it should work as it is in the codepen sample.
  21. 6 points
    GSAP can't hide stuff until the page is ready, so you need to keep it hidden with CSS. Notice in the CSS how I set the visibility to inherit. I removed your demo because you had a paid plugin in there. Use these links for demos.
  22. 6 points
    Sorry, but we don't have the resources to dive into full websites and we need to keep our support focused on GSAP. My advice would be to take what you found on those websites and combine it with the info from the thread above about smooth page scrolling and put together a demo. I'd just start with a few plain divs and go from there. If you get stuck, we're happy to help with any GSAP related problems or questions.
  23. 6 points
    Hi @Cedric K Welcome to the forum. After your first press, the element is already at 360 so you need to use a relative rotation. rotation:"+=360" Happy tweening.
  24. 6 points
    Hi @Niek Roemahlewang I finally had time to look at the CodePen in more depth. The 'gotcha' for me was that the prev/next button tweens needed a fromTo tween to animate from current x position to the snapped x position. Hope this is helpful for your learning/understanding!
  25. 6 points
    Yeah, sometimes it can be hard to come up with a good compromise for all the different devices and displays. You could also make the ratio conditional so regular displays won't use a higher resolution. var two = new Two({ autostart: true, fullscreen:true, type: Two.Types.canvas, ratio: window.devicePixelRatio > 1 ? 1.5 : 1 }).appendTo(document.body);
  • Newsletter

    Want to keep up to date with all our latest news and information?

    Sign Up