Search the Community
Showing results for tags 'tweenmax'.
-
Hi, I've been using GSAP 2 for around 2 months for now. By using the knowledge I have I've created some basic animations using it. Now that the GSAP3 has arrived every thing looks a tini-tiny bit difficult.(but can be achieved) I know its new and i also know this is the only place i can get support. My problem is as follows, I have used Tweenmax and scroll magic to create a basic effect. Now that Tweenmax has been merged in GSAP core I cannot use the `.setTween(t1)`. As we have to Specify the animation at first in the Tweenmax and call them later using setTween. How can I achieve it in GSAP3 One more important thing as you can see the page scroll is smooth on the page. A friend of mine has given me the script to implement in the page that will make the page scroll smooth. Now i have lost contact with him. I wonder If someone could re code the script for me. I would be more than thankful Here is the codepen link for my example: https://codepen.io/Wahed98666/pen/MWWBmWa Thanks in advance
-
Hi, How can i create this sort of effect with gsap https://perficientdigitallabs.com/work Thanks
-
At first sight an easy animation causes lags and is choppy on mobile devices. In Chrome I can reproduce it by going to F12 > emulate mobile > iPhone 6/7/8. And when the page is scrolled down it's possible to see that the animated text is kind of jiggling up and down, in other words, it's choppy. GIF with visual representation -
Hello GSAP pals, I came across with this weird issue, and I need your inputs. I am trying to animate items with TiltShiftFilter() filter enabled, and I get this strange residual afterimage. All I want to achieve is to simply move things around UNDER the TiltShiftFilter() like you see on Pixi demo. Do you guys have any suggestions?
-
After killing animation and setting a new style, the new animation starts from the wrong position Steps for reproducing: Create new tween let tween = TweenMax.to($test, 5, {x: 100}); Kill the tween while animating tween.kill(); Change target style $test.style.transform = 'translate3d(0,0,0)'; Start new animation TweenMax.to($test, 5, {x: 100});
-
Initially, the green box is moving from left to right and the counter number is decreasing from 47,650 to 14,000 but after green box reach to right position, the drag feature is enabled and user can drag green box from right to left and vice versa. The problem I am facing is after dragging, the counter number should also increase and decrease respective to the position of greenbox. Like if I drag greenbox from right to left, the value of counter should increase from 14,000 to 47,650 and if I drag from left to right, the value should decrease from 47,650 to 14,000. Any help will be appreciated
-
Hi there, Based on TweenMax, the ScrollTo Plugin and ScrollMagic (this is probably not where the problem came from): I wanna have a hero section on top of a page, only tweening downwards if the user is scrolling from the very beginning. Everything works as expected on my laptop (MBP). Following problem: If I use a touch-device (iPhone SE, iOS 12.4.1) and use a short touch gesture, the window is tweening to the destination withouth any issue. But if I keep my finger on the screen, the page starts to flicker and jumps back to the top after the tween finished. Is there any way to fix this behaviour? Already tried to toggle preventDefault with eventListeners on Callbacks as well as setting the position again onComplete. Since it's not working with Codepen on my mobile device (maybe because of the iframe issue since iOS11?): http://grommas-dietz.com/reduced-test.html reduced-test.mov
-
Hi, I would like to make my box rotates to 120 degrees, and then from 120 to 240, and then 240 to 360.. But right now each time it starts at 0 and goes to 120 degrees. TweenMax.to(box, 2, {rotation: '+=120', transformOrigin: '50% 50%', repeat: -1, repeatDelay: 2}); What is the correct way to increment a rotation? Thx
-
Hello GreenSockers, You guys are so awesome and thank you for providing this platform. Today, I saw this beautiful accordion animation https://uimovement.com/design/beaches-app/ and I want to create the same effect using GS. Is it possible to create this effect using in GS? Thanks in advance.
-
Hello, I am discovering GSAP and I did an exercice with TweenMax, And I don't understand why I have to write : TweenMax.set('....', {transformPerspective: xxx}); If I write the same thing with TweenMax.to and it don't works ... Can someone tell me when we have to use the 1st one and the 2nd one ?
-
Hi, Does anybody know how to disable rubber-band effect in macOS with using tweenmax smooth scrolling? I know how to disable rubber-band using a simple code, but it doesn't work with smooth scrolling. I think it happens because smooth scrolling using body/html scroll indication. Is it possible to change scroll indication from body/html to any div element or is there any way to disable rubber-band effect? The simple custom code for disable rubber-band effect: html { height: 100%; width: 100%; overflow: hidden; } body { height: 100%; padding: 0; overflow: auto; margin: 0; -webkit-overflow-scrolling: touch; } Rubber-band in macOS Chrome browser: <iframe src="https://giphy.com/embed/S6kGqZiGacx6FyJmLC" width="480" height="300" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/S6kGqZiGacx6FyJmLC">via GIPHY</a></p>
-
I'm trying to achieve an animation where the user hovers over a header. On mouseenter the animation should start playing with a pre-defined duration. On mouseleave the animation should reverse with another duration (a much faster one). My problem is that on mouseleave the animation doesn't reverse from where it was left off, it seems to be reversing randomly. If you hover over the title and rapidly hover off you can clearly see what I'm talking about. I tried to set the time of the animation on mouseleave so it keeps tracks of where it was but it doesn't seem to work either.
-
The Animation system in cocos is imo really clunky, since I have years of experience with TweenMax, TimelineMax, I would like to use greensock with cocos creator. Both use a javascript basic so I suppose it should be doable. Has anyone experience with it? What are caveats? Thanks for your time ;-)
-
Hello I am trying to animate numbers which I will get from an API while rendering it into viewport. I have tried to do so but in my case all the instance of numbers are getting updated but I want each number should be updated upto the value I have got from API. How can I achieve this? Here is what I have tried. https://codepen.io/patrickjane/pen/agNePM Thank You!
-
Legends, I need some guidance. Who can help me in the right direction? I'd like to replicate the effect on the homepage of https://www.barovier.com/it/. The lighting and the ripple effect on the background image. Any idea how this can be achieved?
-
I was making an animation using GSAP and SVG. I am new to GSAP so i don't know that if there is another way to do this animation with GSAP. If there is any better way to do this please suggest me. I would be thankful for good suggestions. Edited : it has issue when user scroll very quickly many parts of bulb doesn't appear properly and also some issues when user scroll upside. (Give suggestion to fix it)
-
I setup a TimelineMax sequence using SplitText... awesome by the way. Loving the SplitText. But after my animations run, I am getting this error in my console. Any ideas? Oh... I'm building in React using Gatsbyjs... just in case.
-
I have simple css animation looks like this, pen circle to square using css I want the same animation using tween max. can someone help me to achieve this??
-
Hi, I'm trying to animate the drag for the swiper with tweenmax. Now the dragging option is to quick and jerky. Dees anyone know how to animate the drag option with tweenmax to have an easing accelerate effect? Here is an example with a slider who has the drag options with nice easing options: http://www.benmingo.com/ Thank you!
-
Hi there i am new to Greensock and have created this animation with TweenMax and CustomWiggle , I wanted to ask you that I want the Ball from Logo to The Word Hello.( To the Dot of The Hello.) I Achieved it but the main problem is the position of the ball remain constant when i decrease Screensize , i want to ask How can i achieve this that take ball from logo and after Bounce ends , I want to make that ball goes into the Hello(Dot) and remain its position fixed with the Hello so when i move to the Smaller Screens i want to go the ball to that point ,.... Please Help i wwant it Responsive for All Devices so Help me. I Hope you Understand the Question Please find animation in above codepen link
-
Hello, When I try to scale with a small amount (between 1.0 and 1.09) the font really becomes blurry. I have tried looking for a solution, but none of them work. Examples: backface-visibility: hidden; transform: translateZ(0); -webkit-font-smoothing: subpixel-antialiased; -webkit-filter: blur(0); TweenMax.set('#button', {rotation:0.01, transformStyle:"preserve-3d"}); In my codepen you can see a example (viewed in Google Chrome).
-
I was trying to follow the video tutorial on this site: https://greensock.com/get-started-js I was stuck on the very first example he gave: `TweenMax.to(".logo", 2, {left:600});` I check the console and there was no error, so I was confuse. I thought i did something wrong on my side, but had no idea what. after some trial and error the 'x' property seem to work fine. Turns out for some reason the left property doesnt work with images. I tried doing it with a div box and the left property works as intended. Can someone explain why this is happening? Thanks
-
Hi all, Looking for a hand or some advice if possible. I've created this codepen (below) and it works well enough when you drag the content horizontally but I would also like to be able to scroll with the mouse through the content, very much like the functionality of this website - https://antoni.de/cases/ I'm fairly new to Javascript and certainly GSAP, so any input is much appreciated. Thanks Jon
-
Hi guys, I'm trying to do a fadein and fadeout effect on pinned sections using scrollmagic and gsap. However, i seem only to be able to do either a fadein effect or a fadeout effect only, what im trying to achieve is fading in and fading out as im scrolling and having the text still pinned while both effects applied. Here is a fiddle of what im having right now. Any help is very very much appreciated. NOTE: from the fiddle it might look like i can already achieve a fadein / fadeout effect from the 2nd section to 3rd section, where ACTUALLY the 3rd section just has a fadein effect.
-
Hi GSAP community! A huge thank you because thanks to you we can do something beautiful! For the needs of my future company that I am develloper I need to do a scroll action like this example> https://codepen.io/GreenSock/pen/GopRwQ I get there very well except that I wish 1. Have my line continue in draw svg until the end (scene with scrollmagic) 2. Stop the blue circle at a certain position while element 1 continues to end. (scene with scrollmagic too) I can not stop my tween blue... Can you help me ? thank you in advance
