Matt Moon

Oh man I wish. The app I'm building is for a small business. I've been directly handling their live streams for the last 7 years and the most viewers I've seen at once is 62. Average in the 30s. With 100k viewers this animation would need to be handled on the broadcast side. Right now I'm just experimenting with 4 svg elements, with classes '.a', '.b', '.c', '.d'. Clicking once fires '.a', click again fires '.b', etc. Apologies for my code above. The function above does look like that, but there's more to that function and has more conditions that start a different animation for each click. When the counter reaches 5, it resets to 1 to animate them again. Tries to anyway. Looking through the docs to find a way to 'reset' the animation back to 0 so it would be ready to be used again, I had thought that a timeline was needed. Obviously my ignorance is in plain sight here. I had found a number of the methods that are used like pause(), progress(), etc. I tried them but couldn't get things to work the way I was expecting. Yes, a user could do that, and it would throw the sequence off. Not sure if that would be detrimental or not. Probably harmless. I was working on getting a simple Codepen up with React and gsap. I used the set up pen you guys have that loads all the plugins etc and is ready to go. I got everything to render OK, but nothing would animate. It was getting late last night, and bailed. I'll try it again when I have time. Thanks again for the time you put in to user posts.

As far as overwhelming the client with a lot of potential hearts at one time, I could try to do what Facebook does. They don't allow any rapid firing. they throttle that ability to about 1 per second.

I'm looking for it to repeat when it's called again. I tried using gsap.set('.a', {clearProps: 'all'}), but it doesn't animate again on the button click. When the button is clicked it's calling a function: function fireHearts() { count = count + 1; let tl = gsap.timeline(); if (count === 5) { count = 1; } if (count === 1 && windowWidth > 1000) { tl.fromTo('.b', { duration: 3.5, opacity: 1, physics2D: {velocity: 600, angle: -92, gravity: 300} }, {duration: 3.5, opacity: 0, physics2D: {velocity: 600, angle: -92, gravity: 300}}); When the count gets back to 1, it should animate the '.b' element again from its starting point. I tried using a callback to call a function that set it to .progress(0), then pause(0), but that didn't work either.

Not sure I follow. Every tick from the server would be one heart. Can you clarify? But I think you're right, I was only thinking about server load, which would be OK. The server could handle it. But the client-side load on each CPU. Yeah, especially on mobile. I've never used Canvas. I'm assuming you mean the html element <canvas>. I'll have to get up to speed. One other question. How do I reset a gsap animation where once it's finished, it resets to its original position? If I have gsap.to('.a', {duration: 2.5, physics2D: {velocity: 500, angle: -60, acceleration: 100, accelerationAngle: 180}}); and then fire it off again, it picks up where it left off.

Hi, Zach Cool. That looks like it would work. If I have the elements, say 5 of them all ready to use, would I place them in the DOM ready to be fired off? Each button click would keep track of how many clicks, and then fire off each one in sequence. Once the fifth one was fired, the first one is ready to go again, like a revolving door. Is that right? So you get a picture of what I'm doing: I've got an iframe that contains a video player that shows a live stream. I'm placing, say, 5 small svg hearts below the frame so not to reveal them. When the user clicks/taps a button, they'll send one of the hearts up the screen. The app is real time so all users connected will see the hearts any user sends. Let me know if I have the right idea on how to implement.

What I'm after is to give a user the ability to fire off a simple animation in a rapid-fire like manner. If the animation took, say 4 seconds to complete (an svg floating up the screen in a random way), the user should be able fire off fast button clicks 4 or 5 times per second and start a new animation each click. Could this be done? Apologies for the simple question. Just starting out with gs.

Ah, OK. That seems to resolve it. Although Webstorm seems to say it can't resolve the plugin, it does work. Thanks!

I dragged the gsap-bonus.tgz file into my root of my project. Then installed it. Maybe I goofed?

Thanks for your reply, Zach. Unfortunately that didn't fix the issue. I'm able to make things work by using the CDN to load the plugin, but if you're able to come to a fix, that'd be welcomed.

I'm getting a strange error after importing and registering the MotionPathPlugin: "Cannot use import statement outside of a module". import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; import {gsap} from 'gsap'; import { MotionPathPlugin } from "gsap/MotionPathPlugin.js"; gsap.registerPlugin(MotionPathPlugin); Any ideas?