Search the Community

Showing results for tags 'timelinemax'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 434 results

  1. Hi, My issue is to do with triggering a nested timeline in reverse, using Greensock and ScrollMagic. I realise ScrollMagic is a separate library but the difference in behaviour I am experiencing is to do with creating timelines either inside a function, or directly on a scrollmagic scene, so I hope somebody can possibly help. I have created two codepens that sort-of replicate my issue. Unfortunately my actual issue is client work so I can't show the same code. But I've recreated the crux of the issue. Additionally my actual code has a pinned element rather than these elements being separate, but hopefully this is enough to explain my issue. Expected behaviour: Scroll down the page - section 1 animation staggers out, section 2 animation staggers in. Scroll down again, section 2 animation staggers out, section 3 animation staggers in. Scroll back up the page - section 3 animations staggers out, section 2 animation staggers in. Again, section 2 animation staggers out, section 1 animation staggers in. I have created a function for fadeIn and fadeOut, and I then create another function "section2Anim", "section3Anim" that is a timeline containing both fadeout and fadein, in order for these two to happen at exactly the same time. (It's not visible on my demo because I don't have the element pinned, but on my pinned version, doing them at the same time basically means one set of dots appear to transform into the next set of dots. Problem: So, I found that the smoothest way to do this, which worked super well for me, when scrolling down the page, is method one, creating section2Anim as a function, and then applying it to the scrollmagic scene. This is this bit of my code: var section2Anim = function () { var tl = new TimelineMax(); tl .add(fadeOutAnimation('#section1 svg circle'), 0) .add(fadeInAnimation('#section2 svg circle'), 0); return tl; }; new ScrollMagic.Scene({ triggerElement: '#section2' }) .setTween(section2Anim) .addTo(controller); You can see this working nicely scrolling down the page in my first codepen, however it does not work in reverse when scrolling up : I have found that the only way to make it work in reverse too, is to not use the function and instead directly assign section2Anim to be the new TimelineMax. like this : var section2Anim = new TimelineMax(); section2Anim .add(fadeOutAnimation('#section1 svg circle'), 0) .add(fadeInAnimation('#section2 svg circle'), 0); new ScrollMagic.Scene({ triggerElement: '#section2' }) .setTween(section2Anim) .addTo(controller); You can see this working both forwards and backwards in my second codepen : So why not just use the latter method, you ask? Well my problem is, as soon as I use this latter method instead in my client code, my animation starts not working properly from the outset, it leaves some of the dots behind (the SVG circles), and doesn't fully trigger the animation. It seems to get stuck and lag, even when just scrolling down. After a while of scrolling it may start to work smoothly. What I am confused about is that in my first method, assigning the function, the animation works really smoothly which is what I want! But I just need it to work in reverse... and because this is all fairly new to me and I am not the best at Javascript anyways (more of a CSS gal), I am confused about why one way reverses and the other way doesn't. I should mention I have also tried some other things with the second method, like pausing the timeline, then playing it on enter of the scroll magic scene, sadly it was still laggy. I appreciate my demo does not show the lagginess or leftover dots, because I had to cut them down for the demo, so maybe this seems fine. But I just can't wrap my head around why the first method, assigning the function of "section2Anim" to the scroll magic scene, works so nicely, but doesn't reverse, whilst the second does reverse, but doesn't work nicely in my actual code. Any help at all much appreciated, thanks so much. Panda
  2. (I am trying to use two separate timelines for open and close animations. I have two tests set up which have the same error.) I pass references to timelines to my callback functions. When I pass them as timeline instances, the callback function reports that they are undefined. I can work around it by passing the names of the timelines as strings but that is clumsy. What am I missing? You'll need to have the console open to see the errors. They also manifest themselves after a few toggle actions as timelines don't get reset properly.
  3. Hello there, I would like to know and clarify if the TimelineMax is already inside of TweenMax? I just created this topic so it will be useful for someone that wants to know if TimelineMax is included on TweenMax file. For any answer will be appreciated!
  4. otqku

    isActive(); TweenLineMax

    Hi guys first time asking help here 😁, I'm doing some stuff with timelinemax and trying to make animation without make another starting while the first is active, i've discovered the isActive property but even by trying it and reading some other post i didn't get any solution for my method, does anyone can help me thank you if (!tl.isActive()) { tl .add('move') .set(this.$refs.mask, { clearProps: 'all' }) .set(this.$refs.tabs, { clearProps: 'all' }) .set(icons, { clearProps: 'all' }) .set(mask, { x, y, scale, }) .to(this.$refs.picture, 0.8, { x, y, scale, ease: Power4.easeOut, }, 'move') .to(this.$refs.triggers, 0.1, { opacity: 0, ease: Power4.easeOut, }, 'move') .to(mask, 0.3, { autoAlpha: 1, }, 'move+=0.4') .to(tab, 0.3, { backgroundColor: '#F4F0E9', ease: Power4.easeOut, }, 'move+=0.2'); }
  5. I'm looking to reverse the TimelineMax onComplete but I can't seem to get it to work. I'm new to this library, there are probably better ways to achieve what I want here. I'll list out the goals: Auto play a tween of the blocks from left to right (working in this Codepen) On mouseover and eventually on touchover reverse the animation with reduced speed and continue to move (working in this Codepen) When the animation goes fully out of the window reverse and come back across the other way (not working) I've tried a few different ways/options but no luck so far. Any help would be appreciated.
  6. Hi, I'm doing a simple morph that repeats between two shapes (with a rotation on as well). When the animation runs, it morphs, then seems to pause for 3 seconds, then seems to do a fluid repeat morph between the two states (which is what I want), and then starts again? How do I get a morph to fluidly go from one shape to another on repeat with out the pause. I'm using yoyo: true as well and thought this would solve it? I'm flummoxed. var tl = new TimelineMax({repeat: -1, yoyo: true}); tl .to("#shape-1", 3, {morphSVG:"#shape-2", rotation: 180, ease: Power1.easeIn}) .to("#shape-2", 3, {morphSVG:"#shape-1", rotation: 180,ease: Power1.easeOut}) Many thanks,
  7. Hi all! I'm working on finding the "best way" to approach animating the width of an object using the current implementation of GSAP TimelineMax paired with ScrollMagic: https://gist.github.com/jodriscoll/bda71b0245776294779cc1f9573186cd As most of you may know, animating the width of an element does not leverage the GPU, causing a reflow of the DOM, which is bad for performance, can break with bad JavaScript, reduces the 60hz/fps target, etc., etc. Unfortunately, I noticed the way the TimelineMax animates an object's property is through transform: matrix3d(). Which in turn, prevents the explicit usage/designation of transform: scaleX() to alter the width to/from through the TimelineMax().to properties. A summarized snippet of where I'm managing this configuration can be seen below: // ... const ScrollLines = new TimelineMax() .to( animate.down, 1, { x: animate.neg, y: animate.pos, width: 0, repeat: 1.25, ease: Sine.easeOut, yoyoEase: true }, "together" ) .to( animate.up, 1, { x: animate.pos, y: animate.neg, width: 0, repeat: 1.25, ease: Sine.easeOut, yoyoEase: true }, "together"); // ... Actual question: Is there a way to alter the width of an element while still utilizing the core matrix3d calculation in TimelineMax? You can see the current implementation of this animation on youcanwa.org, or view the demonstration here. Any suggestions or help would be much appreciated!
  8. Hello, I have been using GreenSock tools for a few months now, but I am hitting a bit of a wall with timelines that I don't know how to overcome. I have successfully created 4 animated timelines that individually run when I call a start() function, e.g. TL1.start(), TL2.start(), etc. I now want to create a conditional timeline that plays one to four of the other timelines depending on an argument in the super-timeline's function, e.g. : function superTimeline() { this.superTL = new TimeLineMax(); // code code code this.start( number) { var number = number this.superTL.add(TL1.start, 0); if ( number > 1 ) { this.superTL.add(TL2.start, 2); } if ( number > 2 ) { this.superTL.add(TL3.start, 4); } etc... this.superTL.restart(true, false); } } My problem is that the super timeline is not even calling the first, non-conditional timeline function (TL1.start). Can someone please tell me what I'm doing wrong? Cheers, GR
  9. Hi, I´m new to this but i love it so far....except for this problem. I made several timelines for my animations, but i can´t get them to loop/repeat. One works fine, but ill guess I´ll have to nest them some way? Or have I got it all wrong?? var t1 = new TimelineMax(); t1.to(txt1_1, 0.5, {opacity:1, ease: Power2.easeOut}).to(txt1_1, 11, {opacity:1}).to(txt1_1, 0.5, {opacity:0, left: -300}); var t2 = new TimelineMax(); t2.to(txt1_2, 0.5, {opacity:1, ease: Power2.easeOut, top:0}).to(txt1_2, 2, {opacity:1}).to(txt1_2, 0.5, {opacity:0, top:30}); var t3 = new TimelineMax(); t3.to(txt1_3, 0.5, {opacity:1, ease: Power2.easeOut, top:0, delay:3}).to(txt1_3, 2, {opacity:1}).to(txt1_3, 0.5, {opacity:0, top:30}); var t4 = new TimelineMax(); t4.to(txt1_4, 0.5, {opacity:1, ease: Power2.easeOut, top:0, delay:6}).to(txt1_4, 2, {opacity:1}).to(txt1_4, 0.5, {opacity:0, top:30}); var t5 = new TimelineMax(); t5.to(txt1_5, 0.5, {opacity:1, ease: Power2.easeOut, top:0, delay:9}).to(txt1_5, 2, {opacity:1}).to(txt1_5, 0.5, {opacity:0, left: -300}) ; var tlp1 = new TimelineMax(); tlp1.to(panel1, 0.5, {opacity:1, ease: Power2.easeIn, left:0, delay:12}).to(panel1, 5, {opacity:1}).to(panel1, 0.5, {opacity:0}); var tlp2 = new TimelineMax(); tlp2.to(panel2, 0.5, {opacity:1, left: 680, ease: Back.easeOut.config(1.2), delay:11.5}).to(panel2, 5.5, {opacity:1}).to(panel2, 0.5, {opacity:0});
  10. Hi all, Im having trouble triggering my 'slideshow', i got the basics working with the timeline, but whenever i restart it, the 'x : ''-='' doenst add the amount, but starts from the previous x value. I have a 'activeCount' variable running, which disables the buttons when the max amount of slides is reached. This part works fine in the console, but ofcourse not really visible when the timeline isn't working correctly. Can someone help me with this? Cheers.
  11. I have a timeline consisting of tweens that change an SVG text element. The text element begins with a value of 400. The first tween will change the text content to 300, the second tween to 200, and the third and final tween to 100. When the page is finished loading, instead of showing the initial value the text element is set to (in this case 400), it shows the value the element will be set to by the FIRST tween (300). Not the final tween, (100) nor the middle tween (200), but the first one. How do I ensure that when the page is loaded, the target elements to be tweened are set to it's initial values BEFORE playing the timeline, and not any of it's future values to be set later?
  12. I am using a draggable knob along an svg path. The path is a quadratic bezier curve which has the y coordinates going up and then down. How should I progress the draggable instance so that I am able to fill the path while dragging the knob on the path? To simply put it, I want the path to be filled while dragging the knob and the portion of the path to be filled should be only upto the knob. Also the mouse pointer should be in sync with the draggable knob. Any suggestions or leads are appreciated.
  13. Hi! Here is my issue. I have an animation with a TimelineLite. This TimelineLite contains others nested timelines. Basically the main one is just tl.add(t1).add(t2).add(t3).add(t4).add(t5); So here is my problem now. I want to play either of theses timelines through a global one. Depending of the button click, I'll add one of theses timelines. ... master.add(tl); master.add(t1); master.add(t2); At the beginning, when I play the master with main one, it works well and the WHOLE animations is played, as soon as I play one of the nested timeline alone, and I play the master one again, the nested ones I played are removed and don't occurs in the whole animation anymore. Just to remind you: tl: main tX: nested timelines master: timeline containing either of the timelines above I assume as soon as you add a timeline into another one, the reference to this one into the main one is removed, is it right? How to deal with that? Thanks! Codepen here: https://codepen.io/anon/pen/NzWqpy
  14. Noturnoo

    gsap.Animation/ScrollMagic + Vue- CLI

    Hello GSAP'ers I'm using Vue-Cli / Webpack template and I already managed to import ScrollMagic, but when running TimelineMax with setTween I get this error: "(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js" My webpack.base.config.js is configured like this: var $ = require("jquery"); var ScrollMagic = require("scrollmagic"); var ScrollGsap = require('scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'); var gsap = require("gsap"); module.exports = { ... resolve: { extensions: ['.js', '.vue', '.json'], alias: { "TweenLite": Path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'), "TweenMax": Path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'), "TimelineLite": Path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'), "TimelineMax": Path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'), "ScrollMagic": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'), "animation.gsap": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'), "debug.addIndicators": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js') } And my Component.vue is like this: <script> import { TweenMax, TimelineMax } from 'gsap' import $ from 'jquery' import ScrollMagic from 'scrollmagic' import gsap from 'scrollmagic' export default { mounted () { TweenMax.from('#red', 5, {width: 0}); const tlVueGsap = new TimelineMax() .from('#blue', 5, {width: 0}) .to('#blue', 5, {x: 400}) const controller = new ScrollMagic.Controller(); const scene = new ScrollMagic.Scene({ triggerElement: "#red" }) .setTween(tlVueGsap) .addTo(controller); } //Close Mounted } //Close Export Defautl </script> ScrollMagic is working, just the gsap.animation plugin that is not being imported Any idea how to solve it? Link of Github Project: https://github.com/Efetivos/vue_init/blob/master/src/components/GsapTest.vue Thanks Folk
  15. Hi! I am taking Diaco's SVG path range slider as a reference and implementing it for some other types of SVG paths like curve and smooth curve. In Diaco's case, he has given the value 'bezier' and the type as 'quadratic' for the SVG path type quadratic bezier curve. What value should be given for a curve and for a smooth curve?
  16. xpo_greensock@knorex.com

    Built-in animations plugin powered by GSAP libraries

    Hello everyone, I have worked on JS-based animations with GSAP libraries for one year. The product I am working on is that provides User Mostly, I use TimelineMax to create timeline animations by using top/left, opacity, scale,... properties. I think my app will be better if I can combine Built-in animations with Timeline, then I can schedule the built animation with duration and offset in my timeline. Built-in animations for example: bounce, slideIn, flash,... reference here: https://daneden.github.io/animate.css/ It's a big challenge to translate from CSS to GSAP based Javascript animations. So I am looking for a plugin powered by GSAP Timeline libs. Please tell me if you have any plugin like that. Thanks a lot.
  17. I have recently started working with an animator who uses After Effects and the Bodymovin plugin to create SVG animations for websites. Bodymovin exports the SVG file as a JSON file, which you then run in a div via a JavaScript command from the lottie.js, Lottie Web library. (Check out the links, or scroll down further in this post for more details.) My primary goal is to create a workflow that allows for rapid creation of custom SVG animations, and be able to control them fully with GreenSock and ScrollMagic. During my research and attempts to integrate them all I have wondered how much of these JS libraries are overlapping each other in toolkits and effectiveness. My knowledge of anything past design, UI/UX, and basic front end JavaScript starts to become limited. So I have to ask, is it possible to control the GreenSock + Lottie animation using ScrollMagic? And perhaps more importantly, should I be animating using this workflow at all? Current Progress: ------------------------------- If you're interested in seeing my initial journey to get all 3 integrated I have documented it below... (Unfortunately I don't have CodePen pro so I wasn't able to put this all together in a Pen for viewing, if it's something that becomes necessary I will go ahead and get CodePen pro and do so.) Research: Integrating TimelineMax, with Lottie Web, and Controlling w/ ScrollMagic I have recently started working with an animator who uses After Effects and the Bodymovin plugin to create SVG animations for websites. Bodymovin exports the SVG file as a JSON file, which you then run in a div via a JavaScript command from the lottie.js, Lottie Web library as you can see from the sample below. var select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s); }, animationWindow = select('#animationWindow'), animData = { container: animationWindow, renderer: 'svg', loop: true, autoplay: true, path: 'PATH.JSON' }, anim; var anim = lottie.loadAnimation(animData); A Singular Example of Controlling Lottie w/ GreenSock I have been looking high and low for documented of examples of people successfully integrating with GreenSock and Scroll Magic with very limited results. I have found one excellent video on YouTube of a dev by the name Chris Gannon (who I suspect may be a member of these forums) successfully controlling a Lottie animation through TimelineMax but that is about it. My Attempts to Recreate This, and Add ScrollMagic Control Have not gone very well... I believe that the current state of my code (mostly able to get this far thanks to the work of Chris Gannon) is missing some vital information on the Lottie animation itself. How many frames does the animation have? The relation of scroll position to frame selection. Pushing that data through to TimelineMax to effectively control animation. My goal being to control the animation with a Tween, Duration Tween, or a Reversed Tween. The code below is my hack-job trying to get this all working; i'm currently dealing with an error from this code "Uncaught ReferenceError: animationControl is not defined". jQuery(function($) { //Lottie animation Window and Data wrapper var select = function(s) { return document.querySelector(s); }, selectAll = function(s) { return document.querySelectorAll(s); }, animationWindow = select('#animationWindow'), animData = { container: animationWindow, renderer: 'svg', loop: true, autoplay: true, path: 'PATH.JSON' }, anim; //Lotie animation trigger var anim = lottie.loadAnimation(animData); anim.setSpeed(1); //TimelineMax Lottie animation control $('#animationWindow').each(function(){ var animationControl = new TimelineMax({}); animationControl.to({frame:0}, 4, { frame:anim.totalFrames-1, onUpdate:function(){ anim.goToAndStop(Math.round(this.target.frame), true) }, repeat: -1, yoyo: true, ease:Linear.easeNone }) }); //ScrollMagic Scene var controller = new ScrollMagic.Controller(); var icon_scene = new ScrollMagic.Scene({triggerElement: "#animationWindow_trigger", triggerHook: 'onEnter'}) .setTween(animationControl) .addTo(controller); }); And this is my current state of affairs. I will be updating this post as I move along, and eventually - hopefully come up with an elegant solution to this.
  18. alfianridwan

    Creating animatable page transitions

    Hi everyone, this is more of an ask-for-help and guidance rather than actually coding help, but I came across a very nice website page transition, which include its website logo transitioning between 2 pages. I was wondering if its possible to apply with GSAP? Here's the animation I am referring to: https://cl.ly/rXmT It would be great if someone could forward me to somewhere where I can learn to replicate the aforementioned effect. Thanks!
  19. I am working on some sort of animation so I have prepared a demo which relates exactly to the task. I am inter-changing the classes after the first timeline completes and running another timeline when the user clicks the second time. The problem is when the second timeline is played, the tween adds the previous tween values to the element which I am tweening on the second click. If you look at the codepen example, when running second timeline i.e home_slide_2, the block_1 element is taking x value from the previous tween making animte both x and y values. Can anyone guide me on this that what I am doing wrong here.
  20. Splurtcake

    TimelineMax Scrollbar Progress Offset

    Hi All, Hoping someone can help with this issue I'm facing. I am controlling the TimelineMax progress based on scroll position. Pretty simple, however I noticed that my tweens are running for the entire length of the page. This is because I am currently calculating the percentage with age-old `window.scrollY / (document.body.clientHeight - window.innerHeight)` What I need help with, is figuring out how to start & finish the animation when the `.tweener` div in my Codepen example enters the viewport, to when it reaches the bottom of the viewport. I also don't want to use the behemoth that is ScrollMagic Any help would be greatly appreciated! Cheers
  21. ryanpwaldon

    Safari bug: _next & _prev

    Hi guys, I'm running into an issue on Safari with a function I've created that uses the _next, and _prev properties on a tween object. Here's the code: const copy = new SplitText('.copy-' + i, {type:'chars, words', charsClass:'chars'}) tl.staggerTo(copy.chars, staggerDuration, {onStart: caretForward, onStartParams: ['{self}']}, staggerDuration, label) function caretForward(tween) { if (tween._prev) { TweenMax.set(tween._prev.target, { borderRight: 'none' }) // this removes the caret for the previous character // tween._prev is always null when called in Safari } TweenMax.set(tween.target, { autoAlpha: 1, borderRight: borderStyle }) // this adds the caret for the current character if (tween._next === null) { // tween._next is also always null when called in Safari blink(tween.target) } } I'm creating a typewriter effect whereby the caret is created (by adding a borderRight to the character) in the onStart callback, and subsequently removed using the _prev property in the following tween. This works in every browser (including IE), however the _prev property seems to be always 'null' in Safari. Does anyone have any ideas on what could be causing this? Any help would be greatly appreciated! Thanks, Ryan
  22. Hello everyone So this is a topic that comes back often, I guess both in the forums and in my head. Today's one of those times, and it would be nice if we could find a way to put it to rest together! I'm talking about how to properly use invalidate() and to make timelines that can adapt to things like a window resize or other events. Please have a look at the codepen. When you press play, the sphere moves along the line using 5 different techniques: passing values to the x and y parameters passing functions to x and y passing values that are calculated with getBoundingClientRect() inside the timeline tweening the transform property as a string (in order to use em units) tweening the xPercent and yPercent parameters If you resize the window or use the up and down buttons, the square changes size (it's based on its font-size). Every time you press the play, the timeline is invalidated before playing again. It becomes apparent that the only technique that is affected by invalidate() is the 2nd one: the functions are re-evaluated at this point. xPercent and yPercent are unaffected but they do work as expected since they're percent-based (you don't even have to invalidate). Something like val = 2; tl.to(element, 1, {x: val}); will always behave the same way, even if you change val and then invalidate tl. I believe this is because val is a primitive, and so what's passed to x is the value itself, not a reference to the variable. Is this correct, or am I missing something? In other words, what's the optimal way to create and work with timelines to make sure they are responsive (without relying entirely on xPercent and yPercent, as that isn't always an option)? Ideally, I hope we can fully clear this up but for myself and others, and maybe have a pinned thread or a page in the docs that clarifies this, as it's a constant headache I think
  23. Hi guys, just a bit of fun - I had a play around with animating some svg elements recently, but in some browsers the frame detaches from the wheels when you click to wheelie. I just wondered whether anyone had any ideas around this really..? Cheers, J
  24. Hey all, I'm getting an issue in Chrome when all my page animations stick part way through for a few milliseconds causing a jittery moment. It's during the animation of an SVG logo where I'm staggering the animation of letters of 2 words into view at the same time. I've attached the screenshot of the issue in Devtools where I believe a grey and striped area means unidentified/unknown (to DevTools) activity that is not occurring in the main thread. If I take out the second stagger the issue disappears. Has anyone come across this before or have I done anything funky below? I can't share a Codepen here unfortunately as it's very brand sensitive at the moment. Thanks in advance! hltl.set('.home-logo', { autoAlpha: 1 }) .set('.home-logo__tm', { opacity: 0 }) .set('.home-logo__plus-horz', { opacity: 0 }) .from('.home-logo__plus-vert', 0.5, { scaleY: 0, ease: Power4.easeIn, transformOrigin: "center center" }) .set('.home-logo__plus-horz', { opacity: 1, immediateRender: false }) .from('.home-logo__boys-border', 1.0, { drawSVG: '0% 0%', ease: Power4.easeOut}, 0.5) .from('.home-logo__girls-border', 1.0, { drawSVG: '0% 0%', ease: Power4.easeOut}, 0.5) .from('.home-logo__plus-horz', 0.5, { rotation: -90, ease: Elastic.easeOut.config(1.0, 0.5), transformOrigin: "center center" }, "-=0.35") .staggerFrom('.home-logo__boys-letter', 0.4, { y: 150, ease: Power2.easeOut }, 0.07, "-=0.4") .staggerFrom('.home-logo__girls-letter', 0.3, { y: -150, ease: Power2.easeOut }, 0.07, "-=0.9") .set('.home-logo__tm', { opacity: 1, immediateRender: false }) .from('.home-logo__tm', 0.5, { x: -50, ease: Power2.easeOut }); hltl.timeScale( 0.7 );
  25. romain.gr

    Randomize value onUpdate.

    Hi, I'm wondering if it would be possible to randomise number AND pass it to the animation on update: $('.dot').each(function(e){ var floatingThis = new TimelineMax({repeat:-1, yoyo: true, onUpdate: update}); var timing = Math.floor(Math.random() * 10) + 8, posY = Math.floor(Math.random() * 90) + 0, posX = Math.floor(Math.random() * 100) + 0; function update(){ timing = Math.floor(Math.random() * 10) + 1, posY = Math.floor(Math.random() * 90) + -90, posX = Math.floor(Math.random() * 6) + 1; // console.log(timing, posY, posX); // floatingThis .to($(this), 1, {x: posX + 'vw', y: posY + 'vh'}); // floatingThis.play(); } console.log(timing, posY, posX); floatingThis .to($(this), 1, {x: posX + 'vw', y: posY + 'vh', ease: Power0.easeNone}); }); I'm pretty sure it is , I think I saw something on the web and probably an answer here on the forum, but I can't find it anymore. I'd like my dots to float randomly (at least on the y axis, on the x axis as well bu not that far) on the page, not sure if it can be done using onUpdate tho. Another question/issue, vh and vw are not working at all, I'm randomising number between 90 and 0, so let say that it's 80, my dot should go out of the screen, but it's not the case, all my dots are staying almost on the same line without going further. So either I can't use vh and vh and than the animation shouldn't work at all or it should respect vh and vw value (that's my understanding). Thank you