Is there a GSAP array for setting repeat delays?

Currently delving into GSAP (Greensock Animation Platform) during my free time and exploring its capabilities. I'm curious if it's possible to set up an array of values for a specific repeating element. Here's what my Tween currently looks like;

TweenMax.from(blink, 0.2, {repeat: -1, scale: 0, ease: Power1.easeInOut, repeatDelay: 3});

I'm interested in having the "blink" element pause for 3 seconds, blink again, then pause for 0.5 seconds before blinking once more, and repeating this pattern. I've searched through the documentation but haven't come across anything relevant. Can this be achieved with GSAP or would I need to utilize JavaScript?

Thanks!

javascriptarraysrepeatgsap

Answer №1

One option is to create a timeline with two tweens that are 2.5 seconds apart, then repeat the timeline with a repeat delay of 0.5 seconds. Would this achieve the desired effect for you? Check out the example here: https://codepen.io/GreenSock/pen/a99e84eaba6f2e358801bbf02ffcf41d?editors=0010

var timeline = new TimelineMax({repeat:-1, repeatDelay:0.5});
timeline.from("#blink", 0.2, {scale:0, ease:Power1.easeInOut})
  .to("#blink", 0.2, {scale:0, ease:Power1.easeInOut}, "+=2.5");

If you need more assistance, feel free to explore the GSAP forums at . Our community is known for providing prompt support and guidance.

Enjoy experimenting with tweens!

Answer №2

The desired outcome I was aiming for, in case anyone is curious:

let animation = gsap.timeline({repeat:-1, repeatDelay:0.5});
animation.from("#blinking-text", 0.2, {scale:0})
  .to("#blinking-text", 0.2, {scale: 1}, "+=3")
  .from("#blinking-text", 0.2, {scale: 0, ease:Power1.easeInOut})
  .to("#blinking-text", 0.2, {scale: 1});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to swap webpack-dev-server for alternative servers such as express or apache

After using vue-cli to scaffold a Vue app, I am looking to set up a new web server instead of webpack-dev-server. I am interested in having a separate configuration file to customize the server settings, similar to using Node Express for production deploym ...

javascriptexpressvue.js

Strange symbols keep appearing in my output from PHP

My current task involves generating a SQL query based on some inputs. I have a predefined SQL statement, in which I perform certain replacements, that will use these inputs to generate the required SQL through an ODBC connection. For now, I have stored th ...

javascriptphpjqueryajaxjson

Utilizing the .finally method on a promise that is already being handled with try/catch statements elsewhere may lead to an UnhandledPromiseRejection

Recently, I've come across an unexpected behavior while working with nodejs. To illustrate this strange occurrence, let's consider the following example: Imagine we have two functions, foo and bar. The foo function creates a promise, attaches a ...

javascriptnode.jspromisetry-catches6-promise

Evolution of ReactJS state over time

When working with React, I wanted to increment a state variable called progressValue by 0.1 every 500 ms until it reaches 100. Here's what I initially tried: const [progressValue, setProgressValue] = React.useState<number>(0) const tick ...

javascriptreactjstypescript

Instructions on merging elements in an array with identical property values

Consider the array below: [{a:1,b:1},{a:5,b:2},{a:10,b:2},{a:20,b:3}] Is there a way to create a new array that merges elements with the same b value, while adding up the corresponding a values? The desired output should be as follows: [{a:1,b:1},{a:(5+10 ...

javascriptarraysobject

Output PHP code within the HTML content using javascript's innerHTML functionality

I wrote a PHP function that increments by +1 every time it is executed. function count_likes(){ $collect=file_get_contents('like_counter.txt')+1; $count=file_put_contents("like_counter.txt", $collect); echo $collect; I also have a JavaScr ...

javascriptphp

JavaScript Game Timer

I am working on a countdown timer where I have set the variable seconds to 10. If the seconds reach zero, I want to add 2 seconds to it and stop the program from looping. Can someone please assist me with this? var isWaiting = false; var isRunning = fal ...

javascriptjquery

Loop proceeding without waiting for promise resolution containing nested Firebase call

I am currently facing an issue with making Firebase database calls within a loop and an outer Firebase call. The inner database call utilizes data returned from the outer call and the loop, hence it is nested inside the outer one. The goal is to set the re ...

javascriptreactjsfirebasefirebase-realtime-databasestate

What are some ways to prevent a submit event from occurring?

When my form is submitting, I am executing a function. $('#form-target').submit(function(){ makechange(); return false; }); However, there are situations where I need to prevent this event from happening. ...

javascriptjquery

Is it the browser's responsibility to convert ES6 to ES5 internally?

Given the support for ES6 in modern browsers, do they internally convert ES6 to ES5 before executing the code? Or can they process ES6 natively using a C++ engine? If they are able to run ES6 directly, how do they guarantee that executing ES6 code produce ...

javascriptnode.jsecmascript-6browserecmascript-2016

What could be causing the malfunction in this JavaScript and WebRTC code?

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Vid Chat App</title> </head> <body> <video controls autoplay> </video> <script src="https: ...

javascriptnode.jsexpresswebrtcejs

Using http-proxy-middleware in a React application for browser proxy

I'm having trouble with setting up a proxy in my React app. Scenario: I have two React apps, one running on localhost:3000 and the other on localhost:3001. What I want to achieve is that when I click on: <a href="/app2"> <button> ...

javascriptreactjsproxyreverse-proxyhttp-proxy-middleware

Ways to halt a message callback?

Looking at some lines of code from a canvas sprite animation on GitHub, I am curious about how to stop the animations once the sprite has finished. window.requestAnimFrame = (function(callback) { // Function for handling animation frames return window.r ...

javascriptcallbackhtml5-canvas

How to Import JSON Files into JavaScript

My goal is to retrieve information from a local JSON file to use in my JavaScript file. I attempted to do this by loading the file and assigning its contents to variables, but I am encountering difficulties. Here's the code snippet I have been working ...

javascriptjquery

Incorporating Physics into OBJ Model with ThreeJS

Currently experimenting with PhysiJS in conjunction with ThreeJS. Recently exported an OBJ model from Blender, only to find that when loaded with OBJLoader, it appears as a BufferGeometry. The issue is that it lacks a crucial vertices property required by ...

javascriptthree.jsphysijsobjloader

JS: Modifying this function to manage a click on a hyperlink

After following the guide provided here I have successfully implemented a drop down list that sends the value to an external PHP script, retrieves HTML output, and displays it in a "div" on the same page. It works flawlessly. My next objective is to send ...

phpjavascriptajax

Struggling to receive information from a third-party API using a token in a React application

Currently, I am attempting to retrieve data from a third-party API. While it functions properly on Postman, I am striving to successfully make a request and access the data within my React project. The public API in question is: https://api.securityscorec ...

javascriptreactjsaxios

Discovering ways to enhance time multiplication with JavaScript

My MVC model provides me with a timespan like this: timeTaken = "00:01:00"; Along with a multiplier value of multiply = "3"; The end result should be 00:03:00 What would be the most efficient way to calculate this time? I'm not well-versed in ...

javascriptjqueryasp.net-mvc

The module demoApp could not be instantiated because of an error stating that the module demoApp is not accessible

I am struggling to create a basic Single Page Application (SPA) using Angular and ngRoute/ngView. Unfortunately, I can't seem to get it to work properly. Every time I try, I encounter the error: angular.js:68 Uncaught Error: [$injector:modulerr] Fail ...

javascriptangularjssingle-page-applicationngroute

Encountered a connection error in the Spring Boot application: net::ERR_CONNECTION_REF

Currently working on a school project developing a Spring Boot application using Restful. The application runs smoothly locally, but when deployed to AWS, I am encountering an "net::ERR_CONNECTION_REFUSED" error for all my GET and POST requests sent to the ...

javascriptjavaspringspring-boot