Jump to content
GreenSock

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

Search the Community

Showing results for tags 'animation'.

  • 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

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

  1. 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. We encourage you to use the updated "Getting Started" page . The GreenSock Animation Platform (GSAP) animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery). See "Why GSAP?" to learn why it's used by over 8,000,000 sites and every major brand. Hang in there through the learning curve and you'll discover how addictive animating with code can be. We promise it's worth your time. Quick links Loading GSAP Tweening Basics CSSPlugin 2D and 3D transforms Easing Callbacks Sequencing with Timelines Timeline control Getter / Setter methods Club GreenSock We'll cover the most popular features here but keep the GSAP docs handy for all the details. First, let's talk about what GSAP actually does... GSAP as a property manipulator Animation ultimately boils down to changing property values many times per second, making something appear to move, fade, spin, etc. GSAP snags a starting value, an ending value and then interpolates between them 60 times per second. For example, changing the x coordinate of an object from 0 to 1000 over the course of 1 second makes it move quickly to the right. Gradually changing opacity from 1 to 0 makes an element fade out. Your job as an animator is to decide which properties to change, how quickly, and the motion's "style" (known as easing - we'll get to that later). To be technically accurate we could have named GSAP the "GreenSock Property Manipulator" (GSPM) but that doesn't have the same ring. DOM, SVG, <canvas>, and beyond GSAP doesn't have a pre-defined list of properties it can handle. It's super flexible, adjusting to almost anything you throw at it. GSAP can animate all of the following: CSS: 2D and 3D transforms, colors, width, opacity, border-radius, margin, and almost every CSS value (with the help of CSSPlugin). SVG attributes: viewBox, width, height, fill, stroke, cx, r, opacity, etc. Plugins like MorphSVG and DrawSVG can be used for advanced effects. Any numeric value For example, an object that gets rendered to an HTML5 <canvas>. Animate the camera position in a 3D scene or filter values. GSAP is often used with Three.js and Pixi.js. Once you learn the basic syntax you'll be able to use GSAP anywhere JavaScript runs. This guide will focus on the most popular use case: animating CSS properties of DOM elements. (Note: if you're using React, read this too.) If you're using any of the following frameworks, these articles may help: React Vue Angular What's GSAP Exactly? GSAP is a suite of tools for scripted animation. It includes: TweenLite - the lightweight core of the engine which animates any property of any object. It can be expanded using optional plugins. TweenMax - the most feature-packed (and popular) tool in the arsenal. For convenience and loading efficiency, it includes TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, RoundPropsPlugin, BezierPlugin, and EasePack (all in one file). TimelineLite & TimelineMax - sequencing tools that act as containers for tweens, making it simple to control entire groups and precisely manage relative timing (more on this later). Extras like easing tools, plugins, utilities like Draggable, and more Loading GSAP CDN The simplest way to load GSAP is from the CDN with a <script> tag. TweenMax (and all publicly available GSAP files) are hosted on Cloudfare's super-fast and reliable cdnjs.com. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> Banner Ad CDNs Every major ad network excludes GSAP from file size limits when you load it from their CDN! Contact your ad network for their URLs. For example, Google hosts TweenMax at: //AdWords and DoubleClick ads only "https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_2.1.2_min.js" NPM npm install gsap See the NPM Usage page in the docs for a full guide including how to import things (ES modules or UMD format), tree shaking, Webpack, how to get bonus plugins into a build system, etc. Downloading GSAP Download a zip directly from our home page or your account dashboard. If you're logged in as a Club GreenSock member this zip will include your bonus plugins. GitHub View the source code on GitHub. Tweening Basics Let's start with TweenMax, GSAP's most popular tool. We'll use CodePen demos so that you can easily fork and edit each example right in your browser. TweenMax.to() To create an animation, TweenMax.to() needs 3 things: target - the object you are animating. This can be a raw object, an array of objects, or selector text like ".myClass". duration (in seconds) vars - an object with property/value pairs that you're animating to (like opacity:0.5, rotation:45, etc.) and other optional special properties like onComplete. For example, to move an element with an id of "logo" to an x position of 100 (same as transform: translateX(100px)) over the course of 1 second: TweenMax.to("#logo", 1, {x:100}); Note: Remember that GSAP isn't just for DOM elements, so you could even animate custom properties of a raw object like this: var obj = {prop:10}; TweenMax.to(obj, 1, { prop:200, //onUpdate fires each time the tween updates; we'll explain callbacks later. onUpdate:function() { console.log(obj.prop); //logs the value on each update. } }); Demo: TweenMax.to() Basic Usage See the Pen TweenMax.to() Basic Usage by GreenSock (@GreenSock) on CodePen. If you would like to edit the code and experiment with your own properties and values, just hit the Edit on CodePen button. Notice that the opacity, scale, rotation and x values are all being animated in the demo above but DOM elements don't actually have those properties! In other words, there's no such thing as element.scale or element.opacity. How'd that work then? It's the magic of CSSPlugin. Before we talk about that, let's explain how plugins work in general. Plugins Think of plugins like special properties that get dynamically added to GSAP in order to inject extra abilities. This keeps the core engine small and efficient, yet allows for unlimited expansion. Each plugin is associated with a specific property name. Among the most popular plugins are: CSSPlugin*: animates CSS values AttrPlugin*: animates attributes of DOM nodes including SVG BezierPlugin*: animates along a curved Bezier path MorphSVGPlugin: smooth morphing of complex SVG paths DrawSVGPlugin: animates the length and position of SVG strokes *loaded with TweenMax CSSPlugin In the previous example, CSSPlugin automatically noticed that the target is a DOM element, so it intercepted the values and did some extra work behind the scenes, applying them as inline styles (element.style.transform and element.style.opacity in that case). Be sure to watch the "Getting Started" video at the top of this article to see it in action. CSSPlugin Features: normalizes behavior across browsers and works around various browser bugs and inconsistencies optimizes performance by auto-layerizing, caching transform components, preventing layout thrashing, etc. controls 2D and 3D transform components (x, y, rotation, scaleX, scaleY, skewX, etc.) independently (eliminating order-of-operation woes) reads computed values so you don't have to manually define starting values animates complex values like borderRadius:"50% 50%" and boxShadow:"0px 0px 20px 20px red" applies vendor-specific prefixes (-moz-, -ms-, -webkit-, etc.) when necessary animates CSS Variables handles color interpolation (rgb, rgba, hsl, hsla, hex) normalizes behavior between SVG and DOM elements (particularly useful with transforms) ...and lots more Basically, CSSPlugin saves you a ton of headaches. Because animating CSS properties is so common, GSAP automatically senses when the target is a DOM element and adds a css:{} wrapper. So internally, for example, {x:100, opacity:0.5, onComplete:myFunc} becomes {css:{x:100, opacity:0.5}, onComplete:myFunc}. That way, CSS-related values get routed to the plugin properly and you don't have to do any extra typing. You're welcome. ? To understand the advanced capabilities of the CSSPlugin read the full CSSPlugin documentation. 2D and 3D transforms CSSPlugin recognizes a number of short codes for transform-related properties: GSAP CSS x: 100 transform: translateX(100px) y: 100 transform: translateY(100px) rotation: 360 transform: rotate(360deg) rotationX: 360 transform: rotateX(360deg) rotationY: 360 transform: rotateY(360deg) skewX: 45 transform: skewX(45deg) skewY: 45 transform: skewY(45deg) scale: 2 transform: scale(2, 2) scaleX: 2 transform: scaleX(2) scaleY: 2 transform: scaleY(2) xPercent: 50 transform: translateX(50%) yPercent: 50 transform: translateY(50%) GSAP can animate any "transform" value but we strongly recommend using the shortcuts above because they're faster and more accurate (GSAP can skip parsing computed matrix values which are inherently ambiguous for rotational values beyond 180 degrees). The other major convenience GSAP affords is independent control of each component while delivering a consistent order-of-operation. Performance note: it's much easier for browsers to update x and y (transforms) rather than top and left which affect document flow. So to move something, we recommend animating x and y. Demo: Multiple 2D and 3D transforms See the Pen Multiple 2D and 3D Transforms by GreenSock (@GreenSock) on CodePen. Additional CSSPlugin notes Be sure to camelCase all hyphenated properties. font-size should be fontSize, background-color should be backgroundColor. When animating positional properties such as left and top, its imperative that the elements you are trying to move also have a css position value of absolute, relative or fixed. vw/vh units aren't currently supported natively, but it's pretty easy to mimic using some JS like x: window.innerWidth * (50 / 100) where 50 is the vw. Just ask in the forums for some help. from() tweens Sometimes it's amazingly convenient to set up your elements where they should end up (after an intro animation, for example) and then animate from other values. That's exactly what TweenMax.from() is for. For example, perhaps your "#logo" element currently has its natural x position at 0 and you create the following tween: TweenMax.from("#logo", 1, {x:100}); The #logo will immediately jump to an x of 100 and animate to an x of 0 (or whatever it was when the tween started). In other words, it's animating FROM the values you provide to whatever they currently are. Demo: TweenMax.from() with multiple properties See the Pen TweenMax.from() tween by GreenSock (@GreenSock) on CodePen. There is also a fromTo() method that allows you to define the starting values and the ending values: //tweens from width 0 to 100 and height 0 to 200 TweenMax.fromTo("#logo", 1.5, {width:0, height:0}, {width:100, height:200}); Special properties (like onComplete) A special property is like a reserved keyword that GSAP handles differently than a normal (animated) property. Special properties are used to define callbacks, delays, easing and more. A basic example of a special property is delay: TweenMax.to("#logo", 1, {x:100, delay:3}); This animation will have a 3-second delay before starting. Other common special properties are: onComplete - a callback that should be triggered when the animation finishes. onUpdate - a callback that should be triggered every time the animation updates/renders ease - the ease that should be used (like Power2.easeInOut) Easing If your animation had a voice, what would it sound like? Should it look playful? Robotic? Slick? Realistic? To become an animation rock star, you must develop a keen sense of easing because it determines the style of movement between point A and point B. The video below illustrates the basics. An "ease" controls the rate of change during a tween. Below is an interactive tool that allows you to visually explore various eases. Note: you can click on the underlined parts of the code at the bottom to change things.
  2. 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.
  3. Hello There , Swedish London based Rich Media Banner Developer & Designer, with over a decade of experience of building banners for a wide range of clients. Canvas or no canvas? No problem. Greensock or Pixie? Can do. Story-boarding needed? Yes. Video? You bet! Interactive Javascript or image slider? Consider it done! Can work over Zeplin or WeTransfer, whatever you prefer. A codepen sample of my work: https://codepen.io/ThomasJames/pen/RXQrzp Some of the companies I worked with: WWF, Wunderman Ogilvy Gamesys, TBWA\Copenhagen, MRM Meteorite, McCann, The Two Marias, NKD Learning, DOOH, York Press, TAG Worldwide Ad banner platforms I work with: Google Studio, Google Campaign Manager, Flashtalking, Celtra, Sizmek, Adform, Admeto, +Yours (Send me the specs!) Contact me at hello@thomasthorstensson.co.uk for more samples of recent work and a discussion of what you need done!
  4. Hello, I'm building an animation that I want to record as video but for now but I can't record screen with a 100% smooth video for x reasons. So, what do you think about the idea to slow down the animation by using the time scale, take automated screenshots and then merge them into a video format and add audio ? Does it make sense or it's a wrong way ? Thanks
  5. Hello everyone, how can I animate with GSAP a gradient text using the css code below? Or some other way. background: linear-gradient(to right,#3b1c52 50%,#b51a84 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  6. Hello, I have implemented an animation with text shadows for my text using CSS, and would like to achieve the same effect on my SVG file. Basically what I need are two shadows with different colors moving away from eachother. I tried using SVG animations but then I found out about GSAP, which seems like a very good thing to know how to work with. But since I'm new to all of this I'm giving up after trying about 10 different things. You can pretty much see all the things I've tried commented out. Sorry if it's too much text but I wanted to make sure there'd be enough context. Thanks in advance.
  7. This is literally my first animation with GSOP, I have some understanding of Js and a good grasp on HTML and CSS but I am confounded. I have been trying to get this to work for the better part of an hour to no avail. Thank you for any help. Sorry, to clarify I know that the image isn't loading in the pen, but I'm mostly concerned for the animation. The image loads fine on my computer because that's where it's source is.
  8. 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)
  9. Hi, I'm new here. I'm trying to figure out how to realize what's in the link rallyinteractive. However, I have some troubles in clamping the color block in the middle. Any help would be appreciated.
  10. Hello, is there a way to integrate such an effect with GSAP? I know I can achieve this effect with css transform translations, but in my case I need to use background-position to animate the movement related to the mouse position. an idea/approach about what I'm thinking: .. // TweenMax.to(".top-image", 1, {backgroundPosition: newvalueX+"px "+newvalueY+"px", ease:Power4.easeInOut}) // .. ps: The pen is just a preview example for what I'm trying to achieve. Hope some GSAP guru' drop some knowledge or show me a solution , I'm a newbie in the field... Thank you, Best regards! Alex
  11. Hi there! I'm very new here. Sorry if I ask dumb questions. I'm trying to create a simple single web page displaying an animation that works exactly like the blue paper (not the white one) animation featured on this website (which is by the way a very beautiful and creative site). But without the text, images only. I'm not trying to rip this website off, the concept is gonna be completely different. I noticed the creator of this website used Tweenlite but for the moment I'm too unexperienced to build it on my own. Anyone here has got a similar Codepen (or whatever) I could use and modify or some useful tricks for a newbie like me? Would be so great! Thank you so much in advance. Cheers from Belgium!
  12. 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??
  13. Hello All, I am looking for the same text hover effect like below link. https://www.artistsweb.com/?fbclid=IwAR1ZFgHylvcRXuiqxcfiLOykfnX7VyQv4CssztG0TbkdW1RlxEWcZ1bMkXE Please help me out.
  14. Hi guys, lately I finally started to create some small project with GSAP (slider, simple animations, etc). I thought it was an amazing tool, so I wanted to go deeper and I discovered some sensational works. My goal is to improve my skills for design better user experience, by making animations and immersive interactions. I was very fascinated by works like this: https://www.sartobikes.com/ In many similar websites, I've seen that developers have almost always used GSAP and Pixi. I tried to do some research to understand how the two libraries can work so well, but I did not find anything quite clear and complete that could help me. What I found on pixi seems far from what I would like to do and what I learned from Greensock I think is not enough! I need to understand where I can start with these two tools! A guide, a series of examples or exercises, a book, something that tells me: "this is the right way to do it". In the last days I'm just grasping at straws, and it's really frustrating. I would love to be able to implement my ideas on the code through this special alchemy! What is for you the best starting point? Thanks to all of you!
  15. MrDys

    Shake animation?

    I'm trying to figure out a simple way to shake an element with GSAP. The way that Animate.css handles it, is translating 10 pixels to the left, then, 20 pixels to the right, and repeating. Makes sense. This can be replicated as-is with a rather redundant TimelineLite setup, but I was wondering if there was a cleaner GSAP approach, perhaps using yoyo and/or repeat and/or RoughEase? Something like: TweenMax.to(element, 0.1, {x:"+=20", yoyo:true, repeat:5}); really just moves the element to the right and then back to the origin. I'm looking for something that would move it to the right, back through the origin to the left, and then back to the origin. A bipolar motion, rather than a unipolar motion, if you want to think about it like that. Is there a simple, non-timeline solution?
  16. Hi I coded this animated boombox in notepad++ and when the dragger at the bottom is dragged the width of the slider should increase, like in the image below. It works perfectly in my browser but when I put the same code in codepen the width updates as its supposed to but the slider never animates. Is this a codepen issue? or is there something I've left out that is causing this? Thanks
  17. Hi all, Not sure if i'm missing something or if I'm doing something incorrect. But I'm trying to run simple unit tests with Jest and Enzyme on my component that uses gsap for a search input box. The component works perfectly fine, animation is great too. But whenever i run my tests, and specifically this line component.find('#close').'click' i get ERROR CANNOT TWEEN A NULL TARGET the close button calls this function below: animation.hideSearch(this.searchInput) animation.hideSearch is: hideSearch(target){ return TweenMax .to(target, duration, { opacity: 0, display: 'none' }) }, And finally here is my search input: <input id='search-input' className={styles.input} value={this.state.searchValue} onChange={this.handleSearch} ref={div => this.searchInput = div}/> Is there anything i need to configure in order to get jest to ignore the gsap animation? Any help is appreciated. thanks!
  18. I'm new to GSAP and SVG masks, and I'm attempting to make an SVG logo look like it's filling up with water. I've used this pen by Lucas Bebber as a starting point. I've got the animation working, but I can't seem to get it to start from the bottom of the logo. I've tried working with a simpler circle SVG, but I'm having the same issue. I've played around with the different numbers in the attributes, but I can't seem to pinpoint my issue. Thanks for any help!
  19. szsoma

    Plinko Game

    Hi! Is it possible to make a plinko game with Greensock? Something like this, but with one ball. Thanks.
  20. I'm creating a landing page and using GSAP to animate some text according the the user's scroll position. How can I keep the landing page in full view and only start scrolling down the page once the text animation has reached its end?
  21. Hi there, I'm very new to GSAP and JS in general, but I really love all the cool stuff that's capable off. Now I've created a tween and some functionality with it. It's all working, but not like I would want it to. For example: how do I define a starting situation from where the animation should take place. I know about the .from method, but when you look at my overlay, it would be in the way the whole time until you click the burger. When I code something hard in my in-line style or CSS like this: .overlay { right: 100%; } It doesn't work either. So I guess my question would be: how do I define a starting situation for a div that should slide on screen when a button is toggled on and slide off when the button is toggled off. My CSS could be off, my JS logic could be off... Tell me please, it would be greatly appreciated! Kind regards
  22. Hi y'all. I need some help here with my current project for university. Here's what I want to do: I created a slideshow for which I want to display animations (for example: scale on mouseover), however I want to show different types of animation based off on what slideshow page I am. Let's say I'm on slider 1 / 3 . Here I want the div box to scale:2 I'm on slider 2 / 3 . Here I want the div box to move x:200 I'm on slider 3 / 3 . Here I want the div box to opacity:0.2 The thing is I kind of know how to do it, using an if statement, but I'm not entirely sure what I have to put in between the brackets [if (HERE)] to target each slider. Thank you in advance for all the advice and help : )
  23. Hi, I found a part of a transition I wonder how to achieve. Please look at the link below. I'm talking about the transition when the user clicks on the "PLUS"-sign where that scales, moves and transitions to the big black container. I've been trying with scale, transformOrigin, y, x, etc but cant seem to figure out the way to go to? Any ideas? https://dribbble.com/shots/3124285-Personal-Site-JS-Interactions
  24. Hi everyone, I'm having some issues with my project for school and I'm hoping someone can help...my animation essentially has four elements: a globe, a dashed line surrounding the globe, a plane that is placed on the dashed line and three clouds. I placed the three clouds in a TweenMax that is separate from the master timeline and they are doing what they need to be doing. The plane is supposed to rotate on the dashed line counter clockwise and that's working fine as well. The globe is supposed to be still and the dashed line is supposed to be rotating clockwise while the plane rotates counter clockwise...this is the part that doesn't seem to be working correctly. Every so often, the animation will completely change in front of me without me even refreshing it– it will either just have the plane, the dashed line and the globe visible (not the clouds) and they'll all be doing what they need to be doing OR it will have everything visible but the dashed line won't rotate. Does anyone know what could be the issue? I appreciate your help!
  25. Hi I'm fairly new to greensock, and I'm loving it. I'm making a 3D timeline(or track) that I'm moving eggs forward and backward when scrolling. I've used perspective to get the '3D' effect. But, I've run into problems, getting the egg to 'fall off'/disappear when it reaches the end. I want to make the whole egg disappear/re-appear when it reaches the end, not portions of it as it moves out of the view-box. Is there some cool way greensock can help me do this? Here's the link to the codepen Any comments would be appreciated.
×