Jump to content
GreenSock

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

Search the Community

Showing results for tags 'timeline'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hi, I'm new to GSAP. I just wanted to check if I can use timeline and scrolltrigger on the same trigger element. I'm getting issues specially when I try to scroll back. Below is the code. gsap.timeline() .to(".background-scene", { opacity: 0, scrollTrigger: { trigger: ".page-7", pin: true, scrub: 0.5, markers: true } }) .fromTo(".background-scene-2", { opacity: 0 }, { opacity: 1, scrollTrigger: { trigger: ".page-7", pin: true, scrub: 0.5, markers: true } }) .to(".background-scene-2", { opacity: 0, scrollTrigger: { trigger: ".page-9", pin: true, scrub: 0.5, markers: true } }) .to(".background-scene-3", { opacity: 1, scrollTrigger: { trigger: ".page-9", pin: true, scrub: 0.5, markers: true } });
  2. Hey there 👋 This is my first time using Timeline, so I'm sure I must be missing something obvious. What I'm trying to do is start the record off slow, let it spin baby spin, and then bring it to a gentle stop with some more easing tacked on the end. But ignorance has stopped me in my tracks, yet again. Any help getting this party started would be greatly appreciated. Cheers!
  3. Is there a built in way to stop/pause a Timeline at a specific time? //Plays from 5 seconds timeline.play(5) //I'm looking for a way to play from 5 seconds and stop at 10. timeline.play(5, 10)
  4. Hi everyone, I'm really newbie with gsap and I'm more than sure that I did some awful mistakes. Sorry in Advance if this was already asked / the answer is in documentation but I really couldn't find it and I managed to spend 8h trying to fix this ( deleting and remade-ing ) . So for short I found some really great examples and this one caught my eye: This one more precisely: https://codepen.io/osublake/pen/YrXdGZ -- I started to analyse it and I tried initially to migrate from gsap 2 to gsap 3 but unfortunately I managed to fail miserably. Afterwards I tried to recreate it from scratch to understand how it works where I failed but still ... I managed to get stuck. The main problem: I don't understand why in the demo this line: var animation = new TimelineMax({ repeat: -1, paused: true }) .add(baseTl.tweenFromTo(1, 2)) mainly starts the timeline in a great position and in my situation: _.animation = gsap.timeline({repeat: -1, paused: true}).add(_.timeline.tweenFromTo(1, 2)); it just stays in place. I also tried to reproduce Blake's example in localhost and it does the same thing ( after changing everything to gsap.timeline and gsap.to ). I'm thinking that I miss something or it's a bad thing on putting the timeline in 'this' object. In the end I just want to properly select the center object/objects and increase the scale . And I'm trying to implement a progressive scaling on each item like: 0.6-0.8-1-0.8-0.6
  5. Hello GSAP community! How's everybody? I would like to know if you could help me. I have two timelines that are triggered by ScrollTrigger when I am within the range of the start attribute. The onEnter and onLeaveBack events of the same ScrollTrigger instance work with timeline.play () and timeline.reverse () respectively, the problem starts when the two timelines are fired and loses the smoothness of the transition. Example: When I move from div.p3 to div.p1 tl2 is interrupted, it is interrupted by tl1 and overwrites everything. I don't quite understand if it could be fixed with invalidate or overwrite. Thank you very much in advance! Here I attach my codepen: https://codepen.io/cpiocova/pen/PoZVEva <body> <div id="box"></div> <div class="p1 pages"></div> <div class="p2 pages"></div> <div class="p3 pages"></div> </body> const box = document.getElementById('box') const tl1 = gsap.timeline({paused: true}) const tl2 = gsap.timeline({paused: true}) tl1.to(box, { duration: 3, x: 350, y: 30, rotation: 45, ease: "expo.inOut" }) tl2.to(box, { duration: 3, x: 20, y: 20, rotation: -125, ease: "expo.inOut" }) ScrollTrigger.create({ trigger: ".p2", start: "0 top", markers: true, onEnter: () => tl1.play(), onLeaveBack: () => tl1.reverse() }) ScrollTrigger.create({ trigger: ".p3", start: "0 top", markers: true, onEnter: () => tl2.play(), onLeaveBack: () => tl2.reverse() }) PD: Excuse my bad English.
  6. Hi, I'm new to gsap, but didn't found any post according to my problem. The point is, that if I prepare a timeline itself and it's played outside scrolling trigger, all delays, segments are running well. But when I put a default scrollTrigger to the timeline attached to section#how-we-work it plays all of the animations at once without any delay. Looks like scrollTrigger ignoring all of delays set. Here below some code I use, thank you for any hint how to solve this: gsap.registerPlugin(ScrollTrigger); //gsap.registerPlugin(); ScrollTrigger.defaults({ toggleActions: 'play pause reverse none', markers: true, }); $( document ).ready(function() { var tl = gsap.timeline(); tl.from('#top-menu',{ y: -100, duration:1, ease: "back" }); var panel_how = gsap.timeline({ defaults:{ delay:2, duration: 1, opacity: 0, scrollTrigger:{ trigger: '#how-we-work', scrub: 1, pin: true, start: 'top 10%', end: 'bottom 50%', id: 'panel-how', } } }); panel_how .from('#cms404_module_31 .cms404_module_header',{x: 100, ease: 'back(2)'}) .from('#cms404_module_31 ._CMS4Toolbox p',{x: -100, ease: 'back(2)', }) .from('#cms404_module_31 ._CMS4Toolbox .btn',{y: 20, ease: 'back(2)', duation: 1}) .from('#lg-dots-1 ',{ scale: 0, duration:1, transformOrigin: '50% 50%' }) .from('#lg-dots-2 ',{ scale: 0, duration:2, transformOrigin: '50% 50%', delay: 0.5 }) .from('#lg-dots-3 ',{ scale: 0, duration:3, transformOrigin: '50% 50%' },'+=1') .from('#COG',{ y: "-5", scale: 0.5, transformOrigin: '50% 50%' },'+=1') .from('#CLOUD',{ y: "-5" }) .from('#EQ',{ y: "-5" }) .from('#LINE',{}); });
  7. Sorry for the noob question here, but I can't seem find it anywhere, so here goes. My nuxt.js index page has several 'panel' components. Each one is full page, and are animated like on this codepen. https://codepen.io/urbgimtam/pen/XWXdypQ Because I'm working with Nuxt, on the main page (responsible for animating the 'panels') I'm using something like: <template> <div> <panel :content="content_a" /> <panel :content="content_b" /> <panel :content="content_c" /> </div> </template> <script> import { gsap, ScrollTrigger } from 'gsap/all' import panel from '[path/to/component]' export default { components: { panel }, data() { return { tl = gsap.timeline() } }, mounted() { gsap.registerPlugin(ScrollTrigger) [... animations defined here ] }, methods: { playAnim() { this.tl.play(0) } } } </script> However, inside each <panel>, I also want to have independent animations. If inside a <panel> component I have again <script> import {gsap, ScrollTrigger} from 'gsap/all export default { data() { panelTimeline: gsap.timeline() }, mounted() { gsap.registerPlugin(ScrollTrigger) [... animations defined here] }, methods: { playAnim() { this.panelTimeline.play(0) } } } </script> is the panelTimeline refering to the same timeline as the parent? I seem to have some interference somewhere in my project and I'm wondering if the parent component ends up sharing the same timeline as the children. I'm using ScrollTrigger on the index (which is the parent of all the panel components), and I've read on the Docs that it uses one single timeline. If so, what should be the best way to make sure to have independent timelines? Big thank you in advance. PS: On gsap v.2, we would do tl: new Timeline() and that would work (and there was no ScrollTrigger )
  8. //This is a onclick function which gets triggered on a button click which is responsible to animated each node to some coordinates defined startAnimation: function(){ // condider findThechildrens function pushes 21 childrens in the global array (function defined below) //please if anyone has any idea to make this code modular and not repetative please help findTheChildrens(); var tween1 = new gsap.timeline(); var tween2 = new gsap.timeline(); var tween3 = new gsap.timeline(); var tween4 = new gsap.timeline(); var tween2 = new gsap.timeline(); var tween3 = new gsap.timeline(); var tween4 = new gsap.timeline(); var tween5 = new gsap.timeline(); var tween6 = new gsap.timeline(); var tween7 = new gsap.timeline(); var tween8 = new gsap.timeline(); var tween9 = new gsap.timeline(); var tween10 = new gsap.timeline(); var tween11 = new gsap.timeline(); var tween12 = new gsap.timeline(); var tween13 = new gsap.timeline(); var tween14 = new gsap.timeline(); var tween15 = new gsap.timeline(); var tween16 = new gsap.timeline(); var tween17 = new gsap.timeline(); var tween18 = new gsap.timeline(); var tween19 = new gsap.timeline(); tween17.to(this.tweenArr[1].position, { duration: 10, x: 10, ease:Linear.None }); tween18.to(this.tweenArr[2].position, { duration: 10, x: -10, ease:Linear.None }); tween14.to(this.tweenArr[3].position, { duration: 10, x: 20, ease:Linear.None }); tween5.to(this.tweenArr[4].position, { duration: 10, z: 15, ease:Linear.None }); tween6.to(this.tweenArr[5].position, { duration: 10, z: 15, ease:Linear.None}); tween7.to(this.tweenArr[6].position, { duration: 10, z: 15, ease:Linear.None}); tween8.to(this.tweenArr[7].position, { duration: 10, z: 15, ease:Linear.None }); tween9.to(this.tweenArr[8].position, { duration: 10, x: 25, ease:Linear.None}); tween10.to(this.tweenArr[9].position, { duration: 10, x: 25, ease:Linear.None }); tween1.to(this.tweenArr[10].position, { duration: 10, x: -20, ease:Linear.None }); tween2.to(this.tweenArr[11].position, { duration: 10, x: -20, ease:Linear.None}); tween3.to(this.tweenArr[12].position, { duration: 10, x: -20, ease:Linear.None}); tween4.to(this.tweenArr[13].position, { duration: 10, x: -20, ease:Linear.None }); tween11.to(this.tweenArr[14].position,{ duration: 10, y: -20, ease:Linear.None}); tween12.to(this.tweenArr[15].position,{ duration: 10, y: -20, ease:Linear.None }); tween19.to(this.tweenArr[16].position,{ duration: 10, x: 15, ease:Linear.None }); tween13.to(this.tweenArr[17].position,{ duration: 10, x: -15, ease:Linear.None }); tween16.to(this.tweenArr[19].position,{ duration: 10, z: 5, ease:Linear.None }); tween15.to(this.tweenArr[20].position,{ duration: 10, z: 10, ease:Linear.None }); }, //This functions gets called only one time which is responsible to tranverse the assembly and keep all found childrens into a global array (tweenArr) findTheChildrens : function(){ this.findTheChildrens = function(){}; var node = scene.children[2].children[0]; for (var i = 0; i < node.children.length; i++) { var childNode = node.children[i]; if (childNode.children.length > 0) { if (childNode.children[0].type == "Group" || childNode.children[0].type == "Mesh") { this.tweenArr.push(childNode); } } } },
  9. hello there beautiful people! first of all, this marvelous timeline is working as intended, the problem: "it's going to get huge" as i add more elements and i dont want to polute my Home.vue view with a long long non readable timeline... I WANT to move this code to a separated file. how do i do that? i know i have to create a separate file and put it somewhere like ../tweens/home.js and then import it on my view import { twnHome } from '../tweens/home' i did try this but it did not work.. im pretty sure i was close.. if this is kind of right... how do i access the TL controls (play, reverse..) ? THANKS A LOT for your time. i hope this makes sense!
  10. I feel like I may be overthinking this... 😬 I have multiple sections on a page, each with their own timeline, all of which are attached to the scrollbar via ScrollTrigger. The trigger for each section is the ID of the section's container, and the timelines start at the top of each container. I'm trying to set up a fixed navigation with anchor links for the user to navigate between these sections. The problem I'm running into is that when you click on a nav link, it scrolls the user to top of the container, which is the start of the timeline. Since the timeline is attached to the scroll bar, the user will then have to scroll to play out the rest of the timeline (which I feel is not always intuitive enough). Is there a way to link to the end of the timeline of a section? I tried putting a hidden element at the end of each section for the anchor link to link to... but that doesn't always play out the whole animation. I also thought about making separate timelines (but I feel like that's too much work for something that probably has an easier solution). Am I missing something?
  11. Hey! Suuuuper new to GSAP. 😅 I'm setting up a timeline, and I have ScrollTrigger attached to the scrollbar. There are certain elements on the timeline that I want to slow down their animation 'cause they fly onto the page at the slightest touch of the scroll bar. What property or properties do I need to add or adjust to do this? Here's my code: ** And to add, I've tried changing the duration, delay, and scrub; none of those seem to have had an effect on the time it takes to scroll through an animation. let hcSection = gsap.timeline({ scrollTrigger: { trigger: "#healthcareHome", pin: true, start: "top top", end: "+=1000", scrub: 2, } }); hcSection.from('#healthcareHome .circle svg', { duration: 2, delay: 0.5, x: '+=200px', y: '100%', scale: 0, autoAlpha: 0, rotation:'360', ease: "power4", }).from(".healthcare-home-text", { duration: 2, delay: 0.5, y: '90%', autoAlpha: 0, ease: 'power4', }).from("#healthcareHome .web-browser",{ duration: 2, delay: 0.5, y: '90%', autoAlpha: 0, ease: 'power4', }).from("#hcBrowserSVG path, #hcBrowserSVG circle, #hcBrowserSVG g, #hcBrowserSVG text", { duration: 2, scale: 1.5, ease: "linear", force3D: true, opacity: 0, delay: 0.2, stagger: 0.2, transformOrigin:'50% 50%', }).to('#healthcareHome .row', { duration: 2, scale: 1.5, ease: "linear", force3D: true, opacity: 0, delay: 0.5, stagger: 0.2, transformOrigin:'50% 50%', });
  12. Hello everyone, I'm doing an animation with a big overlay on page so I'm using the timeline of TimelineMax but I have issue when I'm using .className. To be brief, when I'm using className, it remove all classes on my element and I don't understand why it overwrite it all. Should I write it differently to keep existing classes ? Or is it possible to add an overwriting setting for .className ? This is a codePen that I simplify to troubleshoot : https://codepen.io/FrenchCooder/pen/ZEQpWJe Thanks in advance
  13. I'm trying to use gsap in combination with ScrollMagic. To do so I created a timeline, but this returns an error for setTween(tween): Anyways, after importing: import "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap"; I get the following error: import {gsap} from "gsap"; import ScrollMagic from "scrollmagic"; export const initPhoneScroll = () => { const tween = gsap.timeline() .to(".phone-left", 1, { x: -350 }) .to(".phone-right", 1, { x: 350 }); const controller = new ScrollMagic.Controller(); const scene = new ScrollMagic.Scene({ triggerElement: ".phone-image__wrapper", duration: "100%" }) .setTween(tween) .addTo(controller); }; How do I use gsap in combination with ScrollMagic correctly, since TweenMax, TweenLite, TimelineLite, and TimelineMax have all been consolidated?
  14. I'm kind of stuck on how to approach this problem. I have a timeline that is showing a primary SVG image, I'm trying to find a way to swap the SVG for another as a part of the timeline, and then continue the animation.
  15. I was hoping somebody might be able to help with a little GSAP issue I'm having 🤞 Essentially, on our site we have a 'Menu and Search' button, that when clicked, will animate in the various parts of the full-screen, takeover menu. As well as this, we also have a separate function which deals with toggling a few classes, etc. This function has been assigned to the onStart callback, and also the onReverseCompleted callback, however it appears that on rare occasions (and I can't seem to create a consistent test case for this) that the onStart is running twice, and therefore breaks our animation. Does anybody have any ideas as to why this may be? I've mocked up a sample CodePen with a general gist of our code, except in a more simple context. Any help would be much appreciated. Thanks!
  16. I want to change color of my background and text again and again parsing my array of colors. I don´t know if I can do that using a variable or changing itemColor value, I was thinking in using an onComplete funcion by I will use this inside React, let itemColor = 0; var tl = gsap.timeline(); tl.to("#bg", { backgroundColor: colors[itemColor].dark, duration: 1, delay: 3 }).to("#h1go", { color: colors[itemColor].light, duration: 1, delay: 0 }); Also I have a Codesandbox link for React https://codesandbox.io/s/gsap-react-text-gsaptimeline-cuk58?file=/src/App.js Thanks in advance
  17. Hello On my first gsap project I'm struggling to work out how I can animate all the elements with the classname of ---l to start at the same time but have a tiny delay and finish a little after one another. I'm using the awesome timeline feature so I can chain events. const tl = gsap.timeline({ paused: true }) tl.to(nav, { duration: 1.1, ease: "power2", x: 0, y: 0, z: 0 }) .from(iLettersList, { duration: 1.1, x: 15, transformOrigin: "left" }, "-=1.2") Each class ---l would need a delay going up by say 0.3s, 0.6s, 0.9s, 1.2s and so on. Sure I could set a {delay:2} on each to() or from() but you wouldn't be able to achieve this kind of effect. https://codepen.io/d--c/pen/PoPZvqd Perhaps this may be too difficult for a first stab but it would be awesome to work out how to do with GSAP. Thanks very much for any help and guidance
  18. So I'm navigating a page using transitions animated with gsap. I don't know if that's the correct approach, but currently my navigation consists of plain js code reacting to click events. Since I'm using react, I'm trying to implement react-router. F.e. to check if the about page is opened, I check whether the current path matches with about and then set the correct position of the container (initially it's transformed outside of the view): aboutTransition = gsap.timeline({onComplete: () => destroyPreviousScroll()}) .set(revealerAbout.DOM.inner, { yPercent: 0 }, 0) .set(revealerAbout.DOM.reverse, { yPercent: 0 }, 0); That's how the transition to about usually looks: aboutTransition = gsap.timeline({ onComplete: () => destroyPreviousScroll(), onReverseComplete: () => destroyPreviousScroll() }) .to(revealerAbout.DOM.inner, duration, { ease: ease, yPercent: 0 }, 0) .to(revealerAbout.DOM.reverse, duration, { ease: ease, yPercent: 0 }, 0) As you can see, usually it includes some ease - but for instantly setting it's position, it doesn't. Using aboutTransition.reverse() for the second example, obviously reverses the animation showing the same thing again but backwards - perfect - but currently for the first example, where I'm instantly setting the position, that's not the case, it just disappears again. To put it short, I need it to appear instantly, as with the first example, but reverse with an animation, as with the second example. How can I achieve this?
  19. I'm trying to achieve the following text hover effect: How do I achieve a hover animation that looks like the one in the video? How do I achieve that kind of space/delay between every single letter? Do I have to split them first or is there an easier approach? In the following codepen you can find my current progress.
  20. Hello When my website launches im creating a timeline and then saving it in an object so later I can control it's playback. Thing is, when I call that timeline again, I would like to pass a parameter that will change the background color of my animation dinamically. I know that the timeline is just an object, and going to _first.vars.background I could change the color, but this is cumbersome. Is there a more direct approach so when I try to play or reverse my timeline I could pass parameters directly and change the burger background color? Thanks in advance :)
  21. I'm using the following code to automatically scroll a div up & down when the user has not been interacting for a while (idle). objListingScrollTween = gsap.timeline({ repeat: -1, repeatDelay: 1, yoyo: true }); objListingScrollTween.add(gsap.to("#sessionListingsHolder", { duration: 5, scrollTo: { y: "max" }, ease: "none"})); This works fine but I have two questions: 1) is there an inbuilt way of getting the value of "max" ? 2) when the user interacts, I pause the timeline. When idle resumes I call resume() on the timeline. But the user may have scrolled manually to a different scroll position in which case there is a jump. Is there an inbuilt way to get the value the timeline needs to seek() to in order to restart the timeline from the correct place? thanks
  22. Hi, I've been trying to re-create the history timeline where I found in: https://www.longines.com/company/history/20th/1939 I tried up to a certain point, after that i'm out of ideas. I've provided the work i've done so far. Up to now i've done the following things, OnDrag the handler, the years dots moves OnClick the year dot, page will scroll to the relevant history topic. Now I'm struggling in following areas, how identify, the handler is in between which two years dots, have to show the years data in the handler on passing each year dot, the content should scroll to relevant topic . If you look at the link you'll understand what i'm saying. And even-though, I manage to move the years dots, at end of it, the handler is going pass the last dot. If you look the reference link. They are correctly managing it. I've been trying this for last couple of weeks now. If you guys help on this that would be great.
  23. I'm trying to create a transition animation between page changes. The component has to be responsive, so, on resize event I have to recreate my timeline, changing some small parameters. Here's my animation code this.timeline = gsap.timeline({ paused: false, onReverseComplete: () => { this.$refs.container.style.transform = '' this.timeline.seek(0).paused(true) } }) this.timeline.from('.mosaic > div', { duration, [scaleProperty]: 0, transformOrigin, ease, stagger }) And when I call the method that plays it, I do this: this.timeline.play().eventCallback('onComplete', () => { this.$refs.container.style.transform = 'rotate(180deg)' next() }) Before window resize, the animation works just fine. This is the initial style that gsap applies to the elements. When I resize, I do: this.timeline.kill() this.timeline.invalidate() this.timeline.clear() (and Im just overkilling is cause I tried other approaches and they didnt work either. Not that this one is working... That's why I'm here) and then I recreate the from animation (second code block). When I do that, the animation does not shows up anymore. Here's the initial style after resizing so, what am I doing wrong? I'm using Vue, here is the full code of my mixin: import { gsap } from 'gsap' import { CustomEase } from 'gsap/CustomEase' export default { data () { return { screen: undefined, timeline: undefined } }, methods: { toggleMosaic (next) { console.log(this.timeline) this.timeline.play().eventCallback('onComplete', () => { this.$refs.container.style.transform = 'rotate(180deg)' next() }) }, createMosaicTween (duration, scaleProperty, transformOrigin, stagger) { const ease = CustomEase.create('custom', 'M0,0 C0,0 0.00803,0.16343 0.02359,0.26241 0.03528,0.33672 0.04691,0.38481 0.07146,0.45433 0.09102,0.50976 0.10899,0.54758 0.14127,0.59573 0.17603,0.64758 0.20631,0.68035 0.25235,0.72417 0.29499,0.76476 0.32677,0.79094 0.37697,0.82011 0.43466,0.85363 0.47691,0.86948 0.54247,0.89277 0.64558,0.9294 0.70952,0.95093 0.81445,0.97552 0.88353,0.99171 1,1 1,1 ') if (!this.timeline) { this.timeline = gsap.timeline({ // converteu pra tween paused: false, onReverseComplete: () => { this.$refs.container.style.transform = '' this.timeline.seek(0).paused(true) this.$root.$emit('transition-dismiss') } }) } else { this.timeline.kill() this.timeline.invalidate() this.timeline.clear() } this.timeline.from('.mosaic > div', { duration, [scaleProperty]: 0, transformOrigin, ease, stagger }) .set('.mosaic > div', { clear: 'transform' }) } }, watch: { $route () { if (this.timeline) this.timeline.reverse() } } } And here's is where I call the component method: mounted () { this.createMosaicTween( 0.3, this.isLandscapeScreen ? 'scaleX' : 'scaleY', this.isLandscapeScreen ? 'center left' : 'center top', 0.07) this.$root.$on('resize', () => { this.createMosaicTween( 0.3, this.isLandscapeScreen ? 'scaleX' : 'scaleY', this.isLandscapeScreen ? 'center left' : 'center top', 0.07) }) }
  24. Hey guys. I am trying to make a morph shape with gsap plugin. The result I want to achieve is: THE GOAL IS: Find svg's with class "morph" and runs timeline animation only for the one's that is in the viewport. THE ISSUE I HAVE: I did some work in the codepen, but the issue is, that every time my window detects the svg class "morph" it start to animate all the shapes/timelines on the website - and not only the ones visible in the viewport. Any ideas how to adjust my codepen? Thank you in advance
  25. Hi guys I really happy with gsap3, and I was waiting for it for very log time 🤩, but I now facing a very weird problem I'm animating some labels with gsap timeline.from to make them appear one by one "a really simple animation" but opacity is animating from 0 -> 0.003 or 0.06 also this is the same with scale from 0 -> 0.08 or something like this i'm using react-js but I don't think this is the problem useEffect(()=>{ labelsRef.current && tl .from(labelsRef.current.getElementsByTagName('mark'),{duration:1,opacity:0,stagger:1},0) .fromTo(labelsRef.current.getElementsByTagName('label'),{scale:0},{duration:0.5,scale:1,stagger:1, ease: "back.out(4)"},0.5) },[labelsRef.current]); when I animate the scale by fromTo everything works perfectly Am I doing anything wrong ???? Thank you very much
×