Jump to content
GreenSock

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

Search the Community

Showing results for tags 'tweenmax'.



More search options

  • 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

Found 614 results

  1. Hello! I have a big slider with animations, and it gives a lot of load on the PC P.S. I apologize for the text with errors - I am writing through transliteration (my language is Russian) Question No. 1: How is it in those slides that are not visible to pause the animation, and run only for 4 seconds? Question No. 2: How to put a stop on the entire animation with media <768, and start a new one with media> 768? And is it possible to set the conditions for the media in the animation (I want to make it beautiful on mobile devices .. now we hide it)
  2. Hello everyone, I have been trying to achieve the similar kind of card animation for one of my project. Please click on this link to see card animation effect: http://knowlupus.org/ The way card gets open and close in this game, I want to create exact same effect. I have also attached the codepen link. Is anyone can suggest me how can I achieve this? At least suggest me any resource or idea to achieve this. Your help is much appreciated.
  3. 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
  4. https://codesandbox.io/s/affectionate-cookies-9hccc?file=/src/App.js It does not work when scroll and works only once
  5. I have created a product list page where every thumb image will have a zoom effect. the zoom effect code is working fine in the pure javascript. but my project is in vuejs and I wanna achieve same effect in my vue component. I already made my component and put some code in vuejs way. but it's not working right way. when I clicked it jumps to top left and then zooming. Here is my sandbox link in vuejs. Maybe I am missing something or there is have a better way to write this pure javascript code to vuejs way. it would be appreciated if any expert takes a look and give me the solution. The zoom effect goal is this. I believe i am very close to this effect. just can't figure out the problem. Thanks in advance.
  6. How can I animate height from 0 to auto using the Tweenmax Timeline? I do a lot of research and see some solutions with CSS. But I have already something dynamic with Gsap where I need to animate height from 0px to auto on clicking the item. I didn't find any solution to gsap documentation and any example where I can achieve it. Here is my code to animate on GSAP. import { TimelineMax, Power4, Expo, TweenMax } from 'gsap/all'; const loginSection = document.querySelector('.login-form'); const loginForm = document.querySelector('.login-form form'); const tl = new TimelineMax({ paused: true }) TweenMax.set(loginSection, { height: 0 }) tl.addLabel('start') .set(loginForm, { opacity: 0, x: 50 }) .to(loginSection, 0.7, { height: 'auto', ease: Power4.easeOut }, 'start') .to(loginForm, 0.7, { opacity: 1, x: 0, ease: Power4.easeOut }, 'start+=0.4') when I click on the element rather than it expanding it renders immediately without any animation. But when I use px instead of auto it's working. But it's not my goal. Your suggestion or solution appreciated.
  7. I have the following: var secOne = new ScrollMagic.Scene({ triggerElement: '.section-a', triggerHook: 0, duration: $(window).height() - 100 }) .setTween( new TimelineMax() .add( TweenMax.fromTo(['.section-a .svg-a'], 0.5, { autoAlpha: 0 }, { autoAlpha: 1, force3D: false, ease:Power4.easeNone }) ) .add( TweenMax.fromTo(['.section-a .text-a'], 0.5, { autoAlpha: 0 }, { autoAlpha: 1, ease:Power4.easeNone } ) ) ) .setPin('.section-a') .addTo(controller); Which is fine apart from the fact that the animations have to come in smooth no matter how fast the user scrolling up or down. In this case if the user scrolls to fast then the animated parts suddenly show up. Is there a way to slow down the tween so that no matter if the user scrolling really fast they'll always get a smooth in out response from the animated tween? As you can see I have tried 'ease:Power4.easeNone' and that works to a degree but there's really nothing that stops it from zooming in on a fast scroll movement. Also I know scroll jacking is the work of Beelzebub but I'm being forced into this against better reasoning. Thanks
  8. 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
  9. I am trying to develop an infinite canvas animation which show cases a number of clickable images on it. On moving the cursor the images will move in the opposite direction, I tried this with div now, is it possible to use Canvas for an infinite scroll effect. Plugins used: TweenMax, TweenLinte, ScrollToPlugin, Draggable
  10. Hello, I'm doing something in React.js and I don't know why the scrollTo doesn't work. Basically what I'm trying to do is something similar to what Mikel did : https://codepen.io/e1668058/pen/XWbBGPz?editors=0010 but without the buttons. I'm just trying to figure out how to do it just with the mousescroll. just a little extra, I've also thought of adding an onStart and onComplete for the TweenMax so that when it starts I lock the mousewheel with : window.addEventListener("wheel", function(e){e.preventDefault();}, {passive: false} ); and when it completes I unlock the mouse with passive: true. Thank you. Heres my code pen.
  11. Hello friends !!! I'm a newbie on GSAP tweenMax and don't know how to make tweenMax object for animation like this CSS3 keyframes. @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } please help me about this !!!
  12. With CSS 3 I am able to use keyframes, which makes animating objects really flexible. For example, with keyframes I can change a object opacity from 0 to 1 at 50% of the animation and then back to 0 at 100% of the animation... that creates a smooth fadein and fadeout. I am trying to accomplish the same with gsap. With TweenMax I can set a fromTo... but how, would I go about doing a fromTofrom? I tried doing something like this: var mydiv = new TimelineMax() .add(TweenMax.fromTo($(".mydiv"), 1, {opacity:0, scale:0}, {opacity:1, scale:1})) .add(TweenMax.fromTo($(".mydiv"), 1, {opacity:1, scale:1}, {opacity:0, scale:2})); However, when using "add", there's a very small delay between the first and the second add. How do I go about removing that delay? Or, is there another way of doing chained animations?
  13. Hi everyone, I just learned to make animation website and join in greensock. I'm trying to learn to create a website using the exact same background effect as the one implemented on this website, http://thegigi.it/ in this website using a plus sign in the background and follow the direction of the mouse, I've asked in some forums and finally found the answer using tweenmax. Please guide me how can i achieve the same background effect? thankyou.
  14. GreenSock

    TweenMax

    Note: TweenMax has been deprecated in GSAP 3 in favor of the streamlined gsap object. It has 50+ new features and is almost <strong>half the size!</strong> GSAP 3 is backward compatible with the vast majority of GSAP 2 features including TweenMax. Please see the Migration Guide for details. TweenMax lets you animate literally any property of any object that JavaScript can touch (CSS, SVG, React, Vue, Three.js, canvas, motion paths, generic objects, etc.). Before the release of GSAP 3, TweenMax was the most feature-packed (and popular) animation tool in the GSAP arsenal. However in GSAP 3, you no longer even need to reference TweenMax in your code (although you can because GSAP 3 honors the vast majority of legacy code). We strongly recommend migrating to GSAP 3's streamlined syntax. Quick links Getting started What's so special about GSAP? Documentation: Version 2 | Version 3 Showcase (examples) For convenience and loading efficiency, TweenMax version 2 and earlier included TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, RoundPropsPlugin, BezierPlugin, and EasePack (all in one file). Every bit of that functionality (plus a lot more) is in the GSAP 3 core which is almost half the size. Staggered animations GSAP makes it easy to create staggered animations on multiple objects. The animations can overlap, run in direct sequence or have gaps between their start times. The old TweenMax stagger methods (from version 1 and 2): TweenMax.staggerTo(), TweenMax.staggerFrom() and TweenMax.staggerFromTo() aren't even necessary in GSAP 3 because a "stagger" special property can be added to ANY tween, like in the demo below: Additional Methods (only relevant for version 1 and 2) TweenMax inherits methods from TweenLite and it also has quite a few of its own. ul.chart {width:300px; float:left; margin-right:80px; } ul.chart li:nth-child(1){ font-weight:bold; list-style:none; margin-left:-20px; font-size:20px; margin-bottom:20px; } TweenLite and TweenMax Methods delay() delayedCall() duration() eventCallback from() fromTo() getTweensOf() invalidate() isActive() kill() killDelayedCallsTo() killTweensOf() pause() paused() play() progress() restart() resume() reverse() reversed() seek() set() startTime() time() timeScale() to() totalDuration() totalProgress() totalTime() Methods exclusive to TweenMax getAllTweens() isTweening() killAll() killChildTweensOf() pauseAll() repeat() repeatDelay() resumeAll() staggerFrom() staggerFromTo() staggerTo() updateTo() yoyo() Learn more in the TweenMax version 2 documentation.
  15. Greetings! My apologies in advance if the answer to this question exists somewhere. I have had a look but I've not been able to spot anything conclusive. I've used TweenMax exclusively for years in my HTML5 banners, and sometimes my banners have quite a lot of animation going on throughout. However there are typically time limits for animation (after which no animation can be going on), so when it comes to stopping every animation, I used to rely on the extremely useful TweenMax.killAll(); to end everything at the same time; particularly useful when there are dozens of animations (on smaller things) running at the same time. Though GSAP 3 was released a while back, I've only just begun to adopt it into my banner development process. However, it seems (unless I am mistaken - and please do correct me if I'm wrong) that killAll() no longer exists as a function. I'm sure there's a very good reason for this, and I know I can still kill the animations of everything individually, but it seems like unnecessary extra custom code I now need to write when there was previously a function to do this automatically for every single active tween, in one single stroke. Am I missing something? Is there a plugin or something else I have been embarrassingly oblivious to? Many thanks!
  16. Brand new to this, but I'm not seeing the answer out there (maybe I'm looking up the wrong terms). Anyway, I'm doing a few tests, and I'm seeing a flash of the unanimated objects before they come on. For instance, if they animate from 0% scale to 100, they appear for an instant at full size before they disappear and the animation begins. It's only local at the moment, but I see it in both chrome and firefox. I'm using jquery for selectors, and both jquery, TweenMax, and the function to animate are all being loaded in the head before any of the elements are defined in the body html. Is there a typical way to resolve this or most likely cause to look at?
  17. 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!
  18. I have button 1 that initiates the pulsating animation like this: //Global variables let tween = new TimelineMax(); // button 1 code //First of all select the element let item = $('[aria-label="speak"] svg') // Start the infinite pulsating animation tween.to(item, 1, {scale: 1.1, ease:Elastic.easeOut, repeat:-1, repeatDelay:0.2}) So far so good, BUT... What if we have a second button (button 2) that reverses the iteration Not the whole timeline! I want the second button to instantly animate the pulsating element to its initial state without any jumping or jerking moment. I'm not bound to the code above any pulsating animation is accepted. Let me clear this out: I have used this code but it just reversed the whole timeline to the beginning ... I want it to instantly go back (With the same animation) to initial state : // button 2 tween.reverse();
  19. Hi, I'm trying to add animation on hover in my button. The animation work but I'd some issue in the element after the page scroll as you can see in this example https://codepen.io/MG_Dev/pen/VwYawbe How can apply the animation to all page elements? Thank you!
  20. Hi, Currently I'm in the midst of a project that requires me to show videos sequentially during certain times within certain days of the week. I bumped into this library and it's gorgeous timeline. However whenever I set the duration of a tween (video) on an onStart callback to zero an inconvenient gap of it original duration persists. Is there any way around this problem? Thanks in advance!
  21. Hello! I don't speak English well .. I have a question using TweenMax I'm asking the right question here? I want Controlling a lot of TweenMax in my project I want visual() function run -> reset I want to Infinite repeat this function Please help me. I am a beginner. ? I made the code like this. ⬇️ <script type="text/javascript"> $(document).ready(function() { var visual= function() { var $con_03_mobile = $('.top_con .motion_mobile') , $con_03_01 = $('.con_03 .motion01') , $con_03_02 = $('.con_03 .motion02') , $con_03_03 = $('.con_03 .motion03') , $con_03_04 = $('.con_03 .motion04') , $con_03_05 = $('.con_03 .motion05') , $dim1 = $('.con_03 .dim1') , $dim2 = $('.con_03 .dim2') , $mask = $('.con_03 .mask') , $mask2 = $('.con_03 .mask2') function a5(){ TweenMax.fromTo($con_03_04, 0.6, {x:'8px', y:'184'}, {x:'8px',y:'8px', ease: Power2.easeIn, onComplete: function(){ TweenMax.fromTo($con_03_05, 0.3, {opacity:'0'}, {opacity:1, ease: Power2.easeIn, onComplete: function(){ }}); }}); TweenMax.fromTo($con_03_04, 0.1, {opacity:'0'}, {opacity:1, ease: Power2.easeIn, onComplete: function(){ }}); } function a4(){ TweenMax.fromTo($dim1, 0.5, {opacity:'0'}, {opacity:0.8, ease: Power2.easeIn, onComplete: function(){ }}); TweenMax.fromTo($con_03_03, 0.7, {x:'8px', y:'184'}, {x:'8px',y:'8px', ease: Power2.easeIn, onComplete: function(){ TweenMax.fromTo($con_03_03, 0.3, {opacity:'1'}, {opacity:0, ease: Power2.easeIn, onComplete: function(){ }}); setTimeout(a5, 100) }}); TweenMax.fromTo($con_03_03, 0.1, {opacity:'0'}, {opacity:1, ease: Power2.easeIn, onComplete: function(){ }}); } TweenMax.fromTo($con_03_02, 0.8, {x:'200', y:'0'}, {x:'8px',y:'8px', ease: Power2.ease, onComplete: function(){ setTimeout(a4, 200) }}); } });
  22. 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
  23. Hi, How can i create this sort of effect with gsap https://perficientdigitallabs.com/work Thanks
  24. 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>
  25. 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
×