Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 03/21/2019 in all areas

  1. I believe you may have an issue with immediatRender on the fromTo tweens. See the following: https://greensock.com/immediateRender
    4 points
  2. I have also heard that <use> can be very slow for certain browsers to render. It looks like you're nesting <svg> elements and animating "x" and "y" attributes and using <use>, all of which are pretty bad for performance. I'd recommend animating transforms on those hearts, and avoid nesting them inside the <svg>. Instead, wrap each one in a <div> and animate the transforms of that so that the browser can GPU-accelerate the effect (most browsers cannot GPU-accelerate SVG sub-elements).
    3 points
  3. Hi @friendlygiraffe, I'm not quite sure what you're after ... but any from() tween is going to immediately set the from values by default (immediateRender is true). So you may be looking for immediateRender:false
    3 points
  4. It would just be a matter of moving the reflected image an equal amount in the opposite direction. Here's a basic example. Maybe that'll give you some ideas. Happy tweening.
    3 points
  5. I was a bit confused by the question too. immediateRender:false would be the way to get the y position tween to wait. I'm not understanding the x position set(). You want the circles to jump back to the starting point before the y position tween? Like this? PS I'd always recommend the latest version of GSAP (2.1.2 currently). You were using 1.18.4.
    2 points
  6. Have you tried breaking the animation down into simple parts to see where the issue is stemming from? You're getting a bunch of console warnings with the floating hearts. I'd try disabling that to see if the issue is with your drawSVG or your hearts. My hunch is that its due to animating `attr: { x: x, y: y },` instead of using a transform `x:x` (which can be passed to the GPU). If you turn chrome's paint flashing borders on there's a lot of random extra paints on these hearts..
    2 points
  7. Any particular device, OS and browser version? I just tested on a couple phones and tablets in Chrome and it played perfectly.
    2 points
  8. I don't know which effect you're talking about, but that site looks pretty complex. Probably a lot of canvas being used. Some popular libraries for effects like that are: Pixi http://www.pixijs.com/ Three.js https://threejs.org/ Happy tweening.
    2 points
  9. Thank you so much for replying to me. I watched the video and tried in my example but at first it didnt work. When I was looking at the code while scrolling I noticed that the animation was starting way after the page had already scrolled. So in the end I removed some of my properties, added the immediatRender and it worked! Thank you for your help!
    2 points
  10. Hm, try importing (and protecting) TweenMax: // import libraries import { TweenMax, TimelineMax, Bounce, Back, BezierPlugin, CSSPlugin } from 'gsap/all' // create a timeline const tl = new TimeLineMax({ paused: true }) // add a pulsing glow (uses a custom CSS variable) tl.to('div', 1, { '--some-var': '20px', repeat: -1, yoyo: true }) // fire it up! tl.resume() // eslint-disable-next-line no-unused-vars const dontTreeShakeBezierAndCSS = [TweenMax, BezierPlugin, CSSPlugin] Does that resolve things?
    2 points
  11. Hello! My name is Tom Miller. I'm an animator and front-end dev who specializes in building standard, rich-media, and dynamic ads; though any GSAP-heavy project would be wheelhouse. All my HTML/CSS/JS is hand-coded for optimum file size, performance, and maintainability (no IDEs like GWD or Animate). I come from a design and motion graphics background, and became a freelance animator/developer in 2006 (which means I made the switch from Flash/AS3 to Javascript around 2013). I work for ad agencies, post-houses, and directly with brands of all sizes. You can find a handful of my recent and noteworthy work here: https://creativeocean.com/. I also make digital experiments and demos here: https://codepen.io/creativeocean/. If you're interested in more info about my expertise, pricing, process, or just want to connect, please email me at info@creativeocean.com Thanks! Tom
    1 point
  12. Thanks for the demos. Its generally better to animate the x transform instead of left. Does this work better for you?
    1 point
  13. Repeating/yoyoing are part of the "Max" stuff. You could try importing all those classes from "gsap/TweenMax" instead of "gsap/all" because TweenMax includes TimelineLite, TimelineMax, TweenLite, CSSPlugin, and several other tools. But depending on your bundler, that may not really help. Glad you got it working!
    1 point
  14. clearProps works on your from() tweens, but visually, you won't see anything happen. If you start at x:0 and tween from x:300 and then clearProps, your element will be at 0 because the inline styles are gone and your starting point was 0. Here's a really quick example: One box is to() x:500 and the other is from() x:500. After the tweens complete, box 1 has style="transform: matrix(1, 0, 0, 1, 500, 0);" and box 2 has style="transform: matrix(1, 0, 0, 1, 0, 0);" When we clearProps, the inline styles are removed from both, but the only one that visually jumps is box 1. Make sense?
    1 point
  15. Ah, so easy. Thanks for your input, I think I can solve the problem now
    1 point
  16. Yep, I figured as much and I sure appreciate it!
    1 point
  17. I can personally vouch for @creativeocean, as I have worked with him in the past. Very creative, personable, and passionate about what he does. And yeah, he has been using GSAP for a looong time
    1 point
  18. Just for the record, we did switch to dragClickables being true by default in 2.1.0, but there was a regression that prevented that value from being set/read properly until 2.1.2, so please make sure you're using the latest version. Also, you said "it's my understanding that Draggable ignores anything with the attribute of 'data-clickable'" but I just want to clarify that the value matters. In other words, it's not just having that attribute that matters - it's that it's set to "true" or "false".
    1 point
  19. Are you asking if there is a GSAP plugin to help with that? If so, the answer is no. I'd probably clone the image, scale it to -1 and use a mask or clip-path to only show the heart shaped section. If you put together a demo we're happy to help with the GSAP related parts of your project. Happy tweening.
    1 point
  20. Hi @DevSaver, we've been dealing with the same type of question over here ... I think it would help you.
    1 point
  21. That's close but in your case you are not using different strokes so you can do everything in render function to optimize further. TweenLite.ticker.addEventListener("tick", render); function render(event) { ctx.clearRect(0, 0, canvas.width, canvas.height); // set style and beginPath for (let i = 0; i < lines.length; i++) { // call draw function of prototype but don't stroke in prototype // to avoid stroke calls because you are not using different strokes // or draw lines here directly if you are sure you won't need to make changes // like randomizing stroke etc } ctx.stroke(); }
    1 point
  22. I see, so because stairsIdle is infinite there is no end time, so we add one (a time) via a label to continue the main timeline. Good trick to know. Thanks!
    1 point
  23. You need to find the end time of the last item. mainTL .add(stairsTL.play(), 'stairs') .add("luggage", stairsTL.recent().endTime(false)) .add(luggageTL.play(), 'luggage')
    1 point
×
×
  • Create New...