Search the Community
Showing results for tags 'timelinemax'.
-
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
-
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?
-
Built-in animations plugin powered by GSAP libraries
xpo_greensock@knorex.com posted a topic in GSAP
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. -
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!
-
timelinemax Interchanging classes doesn't clear previous tween values
piyush walia posted a topic in GSAP
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. -
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
-
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
-
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
-
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 );
-
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
-
Hi GSAP enthusiasts, I am searching for the best way to propagate state changes on timeline level (e.g. "timeline was paused", "timeline started playing again"). There are event callbacks: "onComplete", "onUpdate", "onStart", "onReverseComplete" or "onRepeat". But none of them is working for me... I am looking for something like "onStateChange" that I can listen for, to properly propagate state changes. e.g. tl..eventCallback('onStateChange', function(evt) { if (tl.paused()) { /*...*/ } else { /*...*/ } }) Is there any recommended way to achieve this? Any hint appreciated. Happy animating! -
Hey people! I'm working with a TimelineMax timeline. I want to run an animation first. After the first animation I want to resolve a promise. Then later in a separate function I want to reverse this timeline animation After this animation I want to resolve a different promise. I'm not sure how to do this. Any advice?
-
Hello, I have been looking into getting a smooth scrolling effect using GSAP. After looking into Scroll Magic, I realised that what I want to achieve can be done using just using a GSAP timeline. I found something on Codepen which had a similar look to what I was after. I have tweaked this myself but have come to point where I need a bit of help/advice. Basically, my webpage will consist of one page made up of 3 full width sections, each one being 100vh/% in height (so 3 separate panels). The first panel will contain some information and a background image. The second panel will also contain some content but will have a background video applied instead of an image The third will be the same as the first, only with a different background image being used. What I'm trying to achieve to have the panels transition into one another smoothly as you scroll. A simple opacity swap and scale tweak so that as you scroll down the page, panel 1 fades into panel 2 and then panel 2 fades into panel 3. I am having some difficulty with my timeline I think. Currently the top 2 panels fade into each other quite well but I'm having difficulty adding the 3rd panel into the mix. If anyone can offer any advice/help on this then it'd be much appreciated. My codepen URL is https://codepen.io/anon/pen/ZobLYL
-
is there anyway to set timeline duration regardless of each tween duration in timelinemax? i used this trick tl.set({}, {}, 15); but it only works when time line length is less than the new value -
Hi, i'm building a demo for a card game and i got it working thanks to the amazing hints of the experts in this forum. I think i developed the hardest pieces and now i want to play with the timeline to make some animation happen at the same time. I already watched the good tuts and read the documentation about timelines but something goes wrong with this specific case. Please have a look here https://codesandbox.io/s/0v6p9z27n In the animation.js file at line 103 you have the animation that is fired when you press DEAL. The animation consists of 4 parts (line 113-116), if i put a label to the last two animation (to make them run at the same time) it stops working. Can you please help me with this issue? Thanks!
-
Hello! I am trying to build like a wave animation but using multiple elements, in the pen I left, there are 6 levels with some circles in each level. The current animation behavior is... each level of elements starts right after the previous one finish but the behavior I want to achieve it's like a fluid wave, so when the first level it's like at 50% of it's animation, the next level should starts and the same for the next levels, so a complete wave will be visible in the timeline and of course when the last level finish, the wave will start again. Can you help me with that please? -
Hi, I have a timeline which I created beforehand and put it on pause. Then on trigger I run it with tl.play(0) it plays correctly the very first time but subsequent repeats are not right. What am I missing? Thanks for help!
-
Hi, I am trying to launch my timeline without any success. Tweens are being added correctly to the timeline, however .play() does nothing - no errors neither. If I use TweeMax straight away in openContact() animation will occur. I am using Angular CLI 5.2.9 and gsap 1.20.4, here is the code: import { TweenMax, TimelineMax, Power2 } from 'gsap'; ... tween_home = TweenMax.to('#home', this.animation_time, { ease: this.ease, display: 'none', opacity: 0, scale: 0.7 }); openContact(): void { const tl = new TimelineMax(); tl.add(this.tween_home); console.log(tl); tl.play(); } Any ideas what am I doing wrong, how to launch it? UPDATE: This works: openContact(): void { const tl = new TimelineMax(); tl.add(TweenMax.to('#home', this.animation_time, { ease: this.ease, display: 'none', opacity: 0, scale: 0.7 })); tl.play(); }
-
How to add tweens and functions to a timelineMax at the same time?
Catalin R. posted a topic in GSAP
Hi, What is the right code to add tweens and functions to a timelineMax at the same time? Thanks! -
Tweens offers many events to detect actions: onStart, onComplete, onReverseComplete... But there's no onReverseStart How would you detect the animation started in reverse?
-
Hello Gsap'ers, Another post about the function so requested: Transition between pages using our beloved GSAP. But unlike the others, instead of questions, I am bringing some answers. I decided to make a Simple site template with SPA, which I believe will help everyone who is looking for solutions to these tools without having to use a framework. The activation of transitions is very simple: just click on the photos to go to the corresponding page. I hope it's useful. Ps¹: It is necessary to use the BarbaJS lib Ps²: Some settings are still missing and you can optimize the codes, best experience in Debbug Mode View Ps³: I'm using the translator hahaha https://codepen.io/Noturnoo/project/full/ZeYREp/
-
Hi everyone, For my school's graduation showcase website, I have a DrawSVG element in which when completed, will perform an animation on other elements. You can view the code in main.js file here. The problem is on https://fmsstories.com, when loaded, there will be: 1. A slight blink of the original DrawSVG element 2. The elements that were supposed to be animated to view after DrawSVG element is completed drawing comes up first, and THEN disappearing and then appearing again after the animation is complete. This is especially apparent in mobile (i0S 11, Chrome, Safari). How do I fix the 2 problems? I have always thought it might be caching problem, but I have already tried to fix it using caching meta tags but the problem still persists. Is it a possibility on how I write the JS? (sorry, I'm still a newbie in JS!). Thanks, Alfian
-
Hello, in my current project that is a fullscreen site, the visitor first sees an introduction animation. After thsi animation the timeline is paused. The user now can navigate through diffrent screens by using the mousewheel. Each screens animations are part of the main timeline that is declared global and are labeled. I am using TimelineMax and the main timeline is declared global to access it from everywhere where its needed. Navigating through the screens and all animations are working but I have the following problem: When an timeline section (screen animation group) is running I dont want the user to be able to scroll further untill the animation is finished. But I cant check the current state / status of the main timeline. I have tried .active(), .paused() but according to my logging output they dont seem to change. So how can I access the current state of the timeline? Markup: <!-- HTML TAG AND <head> --> <body> <!-- Screens do also have some markup inside but thats unnecessary --> <div id="screen-1" class="screen"></div> <div id="screen-2" class="screen"></div> <div id="screen-3" class="screen"></div> <div id="screen-4" class="screen"></div> </body> JavaScript TimelineCreation $(function(){ //Get necessary DOM elements with jQuery //and declaring timeline var tl = new TimelineMax(); /* ... some more code ... */ //Creating timeline //Introduction animation tl.add(TweenMax.to(/* my animation */)); //Labels are declared in an array, each screen has an own label tl.addLabel(sceneLabel[0]); //add more animations tl.addLabel(sceneLabel[1]); // more animations ... tl.addLabel(sceneLabel[n]); }); Mousewheelhandler function mouseWheelHandler(e) { //Following condition as always false no matter when triggered, //also tried .paused() but its also not working if ( tl.isActive() === true ) { return; } if (e.deltaY > 0) { //Scrolldown console.log("scrollDown"); currentScreen += 1; } else if (e.deltaY < 0) { //Scrollup currentScreen -= 1; } if (currentScreen > maxScreens) { currentScreen = maxScreens - 1; return; } else if (currentScreen <= 0) { currentScreen = 1; return; } tl.tweenTo(sceneLabels[currentScreen]); }
-
Im attempting to build a 2 Scene ScrollMagic / GSAP function. Scene 1 is when the content enters the screen, and Scene 2 is when the content is leaving the screen. Scene 1 works fine while using the function's element as a trigger, but when I try to use a child element as the Scene 2 trigger the entire second scene / TimelineMax scene seems to break. --- The first Scene of the function (scene_in) works fine with the triggerElement set as the selector of the parent function: But on the second Scene of the function (scene_out) the triggerElement does not seem to work at all: $('.text-fade-in > ul').each(function(){ var thisSelector = this; var thisLi = $('li', this); var thisLiHeight = thisLi.height(); var fade_in = new TimelineMax(); fade_in.delay(.45); fade_in.staggerFrom(thisLi, .5, {opacity: 0, top: 14, ease: Sine.easeIn}, .15); var scene_in = new ScrollMagic.Scene({triggerElement: thisSelector, triggerHook: 'onEnter'}) .addIndicators({name:"li_fade"}) .setTween(fade_in) .addTo(controller); var fade_out = new TimelineMax(); fade_out.to(thisLi, 1, {opacity: 0, top: -10, ease: Sine.easeOut}, 0); var scene_out = new ScrollMagic.Scene({triggerElement: thisLi, triggerHook: 'onLeave', duration: thisLiHeight}) .addIndicators({name:"li_fade_out"}) .setTween(fade_out) .addTo(controller); }); -
Hi Gsap'ers. Is there a way to go to a label other than just jumping? Example: When clicking the button it goes from the current point of the timeline to the label, but keeping the tweens in sequence.
