Jump to content
GreenSock

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

Search the Community

Showing results for tags 'tweenmax'.

  • 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. 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.
  2. 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.
  3. 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
  4. 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
  5. 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.
  6. 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 !!!
  7. 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?
  8. 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!
  9. 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!
  10. 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();
  11. 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!
  12. 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!
  13. 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) }}); } });
  14. 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
  15. Hi, How can i create this sort of effect with gsap https://perficientdigitallabs.com/work Thanks
  16. 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
  17. 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?
  18. 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});
  19. 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
  20. 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
  21. Hello, Simply trying to have my "clouds" (the red boxes that say cloud) to repeat. Currently, they are repeating, but the animation doesn't end (the cloud doesn't make it to the other side of the screen) There are about 5 different clouds on the page and I want them all to move at varying speeds, and then loop once they can no longer be seen on the page. Any help greatly appreciated. Cheers!
  22. 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
  23. When you animate the value of a CSS variable you can affect any element that uses that variable in any of its styles. Instead of having a DOM element as the target of your tween, you will use the rule that defines your CSS variable. Check out the video and demo below to see exactly how it works. Video Code CSS html { --myColor: green; } .wrapper { border: 1px solid var(--myColor); border-radius: 10px; margin-right:10px; } h2, strong { color:var(--myColor); } .cool { display:inline-block; padding:10px; color:white; border-radius:8px; background-color:var(--myColor); } JavaScript gsap.to("html", {"--myColor": "orange", duration: 1, yoyo: true, repeat: 20}); Demo Support for CSS variables was added in GSAP 1.20.0
  24. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. GSAP's CSSPlugin is now super-charged to handle some slick new CSS3 properties like 3D transforms, boxShadow, textShadow, borderRadius and clip. Plus you don't need to worry about a litany of vendor prefixes. GSAP makes it easy to create next-generation effects today. [Note: the animation below is NOT a video - it's regular DOM elements being animated with GSAP. And yes, the scrubber works!] 3D transforms textShadow boxShadow borderRadius clip JS -moz- -o- -webkit- -ms- -no-more- play These features work in virtually all modern-day browsers (see caniuse.com for details about browser support for each feature). Generally if the browser supports the css property (browser-prefixed or not), you can animate it with GSAP's CSSPlugin. In fact, GSAP even works around several browser bugs and glitches to deliver a whole new level of consistency to your animations. It can't work miracles or, for example, permit fancy 3D transforms in IE8, but it does a bunch of work under the hood to empower these features as consistently as possible. 3D Transforms Browser support: GOOD (Chrome 12, Safari 4, Firefox 10, IE 10, iOS 3.2, Android 3.0) see details GSAP makes it a breeze to create amazing 3D effects. In addition to all the standard 2D transform properties like rotation, scaleX, scaleY, x, and y, you can also tween 3D properties like rotationX, rotationY, rotationZ, z, perspective and transformPerspective. You can even create multiple tweens that animate each property independently in a staggered fashion and/or with different eases (something virtually impossible to do with CSS3 transitions). In order to get the most out of these 3D properties, it's important to understand how perspective and transformPerspective work. They both affect the amount of distortion applied in 3D space. transformPerspective affects only the element that is being animated, making it look as though it has its own distinct vanishing point in its own 3D space. You can choose to give each element a transformPerspective specifically or use CSSPlugin.defaultTransformPerspective to set a default that will be used for all animated elements that don't have one specifically defined. transformPerspective no transformPerspective No visual distortion at all. Impossible to distinguish vanishing point or depth. DOM elements by default have no transformPerspective. transformPerspective:200 The lower the transformPerspective, the more extreme the distortion. transformPerspective:600 With a higher value the 3D effect is less pronounced. play perspective should be applied to the parent of the element(s) being animated - an element's perspective affects all of its children, allowing them to share a common vanishing point. Typically this is the best way to apply realistic perspective to multiple elements (instead of using transformPerspective on each child element). Practically speaking, you'd almost never use BOTH transformPerspective AND perspective. transformPerspective Vs perspective transformPerspective is applied to each box causing each box to have its own vanishing point A single perspective is applied to the parent div of all the boxes causing each box to share the same vanishing point play transformOrigin can add some really interesting effects - think of it like a pivot point around which your transforms happen. By default, it is in the center of the element ("50% 50%"). transformOrigin is a space-delimited string of values in the following order [x-axis y-axis z-axis] (the z-axis value is optional). You can define the values using the keywords "top", "left", "right", or "bottom" or use percentages (bottom right corner would be "100% 100%") or pixels. transformOrigin The negative z-index (-200) set in the transformOrigin properties of the second animation changes the effect drastically. TweenMax.to(box1, 3, {rotationY:360, transformOrigin:"left top"}) TweenMax.to(box2, 3, {rotationY:360, transformOrigin:"left 50% -200"}) play Caveats: Performance can vary greatly between the browsers. Generally Webkit browsers like Chrome and Safari do best by far, and Firefox lags behind but updates are getting pushed out pretty aggressively by everyone so things can change fast. In some browsers, you may notice a slight shift of pixels when an element starts/ends a 3D animation. This has nothing to do with GSAP - it's the browser jumping into 3D mode and working with the GPU. The only known workaround is to make sure you apply some sort of 3D transform from the beginning which you could do in your css like "transform:translateZ(0.1px);" (plus the obligatory vendor-prefixed variations). Font antialiasing can appear to change when there's a 3D element on screen. Again, this is a browser issue and has nothing to do with GSAP. In Webkit browsers, you can [mostly] resolve this by setting -webkit-font-smoothing:antialiased in your css. If a browser doesn't support 3D transforms, they will simply be ignored (no errors are generated). In some versions of Firefox, elements with BOTH a boxShadow AND 3D transforms applied don't always render correctly (again, it's a browser issue). We're not aware of a workaround but we expect Firefox to fix the bug in a future release. IE10 supports 3D transforms, but it does not support transformStyle of "preserve-3d" (see Microsoft's site for details). textShadow Browser support: GOOD (Chrome 22, Safari 5.1, Firefox 15, IE 10, Opera 12.1, iOS 3.2, Android 2.1) see details textShadow takes a space-delimited string consisting of up to 4 values (just like standard css) h-shadow: The horizontal offset of the shadow. Negative numbers are allowed. v-shadow: The vertical offset of the shadow. Negative numbers are allowed. blur: Blur distance (optional). color: Shadow color (optional). Use any color format: #ff000, #f00, red, rgb(255, 0, 0) or rgba(255, 0, 0, 0.5) for control over the opacity of the shadow. TweenMax.to(element, 0.2, { textShadow:"10px 10px 10px rgba(255, 255, 255, 0.5)" }); Move your cursor over each word to see a different textShadow effect. GLOW BLACKOUT GHOST TweenMax.to(glow, 0.2, { textShadow:"2px 2px 15px rgba(145, 233, 0, 1)", color:"#91ff00" }); TweenMax.to(blackout, 0.2, { textShadow:"1px 1px 1px rgba(255, 255, 255, 0.5)", color:"#000" }); TweenMax.to(ghost, 0.2, { textShadow:"0px 0px 15px white", color:"none" // IE10 unfortunately hides the shadow too }); boxShadow Browser support: VERY GOOD (Chrome 22, Safari 5.1, Firefox 15, IE 9, Opera 12.1, iOS 3.2, Android 2.1) see details A nice boxShadow animation can visually lift an element off the screen or add an attention-grabbing glow effect. Repeat and yoyo a TweenMax to give it a pulsing glow easily. boxShadow takes a space-delimited string consisting of up to 5 values in standard css form: h-shadow: The horizontal offset of the shadow. Negative numbers are allowed. v-shadow: The vertical offset of the shadow. Negative numbers are allowed. blur: Blur distance (optional). spread: Expansion amount of the shadow beyond the size of the element (optional). color: Shadow color (optional). Use any standard color format like #ff000, #f00, red, or rgb(255, 0, 0). TweenMax.to(element, 0.5, { boxShadow:"0px 0px 10px 10px rgb(0, 204, 0)" }); Move your cursor over the buttons to see a variety of boxShadow effects. sharp shadow blur shadow black spread orange glow green pulse white blur TweenMax.to(sharpShadow, duration, { boxShadow: "10px 10px", }); TweenMax.to(blurShadow, .3, { boxShadow: "10px 10px 10px", backgroundColor:"black" }); TweenMax.to(blackSpread, .3, { boxShadow: "0px 0px 10px 6px black", backgroundColor:"black" }); TweenMax.to(orangeGlow, .3, { boxShadow: "0px 0px 10px 4px #f60", backgroundColor:"#f60", borderColor:"#f60" }); TweenMax.fromTo(greenPulse, 0.7, { boxShadow: "0px 0px 0px 0px rgba(0,255,0,0.3)" }, { boxShadow: "0px 0px 20px 10px rgba(0,255,0,0.7)", repeat: -1, yoyo: true, ease: Linear.easeNone }); TweenMax.to(bsBox5, 0.5, {backgroundColor:"black"}); TweenMax.to(whiteBlur, .3, { boxShadow: "0px 0px 24px 6px white", backgroundColor:"white", color:"#999" }); borderRadius Browser support: VERY GOOD (Chrome 22, Safari 5.1, Firefox 15, IE 9, Opera 12.1, iOS 3.2, Android 2.1) see details CSSPlugin deftly handles a variety of borderRadius values, animating between them with ease. Specify the radii of all 4 corners in a single string and CSSPlugin will know exactly what to do. Use px, em, % or any unit you want, just like standard css. //applies same value to all 4 corners: TweenMax.to(element, 1, {borderRadius:"25px"}); //unique values for top-left, top-right, bottom-right, bottom-left TweenMax.to(element, 1, {borderRadius:"10px, 4px, 12px, 0px"}); //top-left and bottom-right 10px | top-right and bottom-left 4px TweenMax.to(element, 1, {borderRadius:"10px, 4px"}); The demo below illustrates a variety of ways to animate borderRadius. Sample a variety of borderRadius animations by rolling over each grey shape. TweenMax.to(box, .75, { //all 4 corners borderRadius:"25px" }); TweenMax.to(box, .75, { //all 4 corners borderRadius:"50%" }); TweenMax.to(box, .75, { //top-left and bottom-right | top-right and bottom-left borderRadius:"0px 20px }); TweenMax.to(box, .75, { //top-left | top-right and bottom-left | bottom-right borderRadius:"0px 20px 50px" }); TweenMax.to(box, .75, { //top-left | top-right | bottom-right | bottom-left borderRadius:"0px 20px 50px 50px" }); TweenMax.to(box, .75, { //top-left | top-right | bottom-right | bottom-left borderRadius:"50px 50px 50px 0px" }); clip Browser support: VERY GOOD (Chrome 2, Safari 1.3, Firefox 1, IE 9, Opera 9.2, iOS 3.2, Android 2.1) see details The clip css property controls the clipping region for an absolutely positioned element (that's not a GSAP limitation - that's how it works in plain css too). Any part of an element that would render outside the clipping region will be invisible. This includes the content of the element and its children, backgrounds, borders, outlines, and even any visible scrolling mechanism. You define the rectangle as "rect()" containing a comma-delimited list of four values — top, right, bottom, and left—in that order. Negative length values are allowed. The top and bottom positions are relative to the top border edge of the element’s box. The left and right positions are relative to the left border edge in a left-to-right environment, or to the right border edge in a right-to-left environment. TweenMax.to(element, 0.5, { // rect(top, right, bottom, left) clip:"rect(0px,150px,150px,0px)" }); Move your cursor over the images to see a variety of clip effects. TweenMax.from(img1, 1, {clip:"rect(50px 100px 50px 0px)"}) TweenMax.from(img2, 2, {clip:"rect(100px 0px 100px 0px)"}) TweenMax.from(img3, 2, {clip:"rect(50px 50px 50px 50px)"}) TweenMax.from(img4, 2, {clip:"rect(0px 100px 100px 100px)"}) When doing a from() tween (as demonstrated above) that uses the css clip property the target of the tween must have a clip property applied prior to the tween running. View a simple example or the full demo code. Note: although the sample code on this page uses TweenMax, CSSPlugin works equally well with TweenLite. Just don't forget to load CSSPlugin with TweenLite (it's already included inside TweenMax's js file for convenience). Conclusion There has never been a better time for animation in the browser. Before now, developers had to wrestle with clunky css transitions or css animations which can't accommodate even moderately complex sequences with fine-tuned control over individual properties or deliver solid control over entire sequences, plus they couldn't work around some of the browser bugs (like Safari's major transformOrigin inconsistency or Firefox's randomly disappearing 3D transforms) and they required a bunch of prefixes and redundant code. JavaScript options were very limited as well and none (that we could find) solved some key issues. With GSAP, you can finally get the control and consistency you need and it delivers solid performance as well (much better than jQuery - see the "cage match" for a detailed comparison). Make sure you download a fresh copy of the GSAP JavaScript files from the main GSAP JS page and go have some fun (if you're a Club GreenSock member, you can download it with your bonus plugins from your GreenSock account). If you haven't used GSAP before in JavaScript, check out the Jump Start. Got questions? Drop by the forums and post there.
×