Jump to content
GreenSock

Search the Community

Showing results for tags 'gsap'.

  • 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've recently got lucky with an answer from PointC in another thread, and now having spent a few hours researching without luck on another matter, I guess I'll try my luck again. The problem: I have 30 points, each with a X and Y value (DIV's with a Top and Left setting), placed around a map of 1536x1080px. A user can select any of these points, and when that happens, a line should be drawn (animated in) from one point, to the selected one. This seems really straight forward, and to some extend I have managed to do that, with canvas drawing (p5.js), but it turns out extremely unsharp, and seems to be way to complicated, for what it should do, I've even tried just creating a DIV, and animating on it's width, thereby faking a line. I'm assuming maybe the GSAP SVG animation tools can solve this, but had no luck finding it, it's all about pre made SVG files from illustrator, which then are masked in animations, I can't do that, seeing as I have too many points, and never know how many new ones will be created. Any good solutions to this? It seems to simple, to be this complicated :S / Chris
  2. Hey I'm currently working on a touchscreen which let's say for simplicity sake, just has a fullscreen bitmap image, the image is of a book and I wan't to be able to zoom into certain parts of this old book. Around this bitmap of the book, I've placed invisible DIV's to click on, when clicked, I would like the entire bitmap, to center the invisible box, by scaling up the entire bitmap. Basicly like the Zoomooz.js library, but I just know there must be a way to do it with GSAP ................. ................. . . . . . . Result should be: . X . With the "invisible" dom element zoomed in, but by using the viewBox. . X . . . ................. ................. When reading around the forums, I came across this post, which exactly does what I want, but this whole viewBox thing, seem to be a SVG thing, and therefor no help. This post Any ideas? Codepen: http://codepen.io/Abarth77/pen/MpJagb?editors=1111 The File: Zoom.zip
  3. Hello, I am having a couple of issues, the first being a slight flicker on load of the homepage, before the animation kicks in, it flickers a preview of the page: http://2017.hypemarketing.uk. My second issue is more serious, on my mobile, Android - Chrome V. 56.0.2924.87 the animation seems to lag incredibly, and almost stops my mobile browser working, could someone help me figure out how to make this smooth. Any and all assistance would be greatly appreciated, my code is below. jQuery(document).ready(function($) { // Scroll Magic Controller var frontPageAnim_Controller = new ScrollMagic.Controller(); //Scroll Magic Controller // Animation vars var htmlContainer = $('html'), body = $('body'), viewPort = $(window).height(), // Height of viewport heroSection = $('.hero-section'), panelClickthroughs = $('.panel-clickthroughs'), portfolioPanels = $('.portfolio-panel'), portfolioSection = $('.portfolio-section'), socialSection = $('.social-section'), scrollDown = $('.scroll-down'), scrollDownArrow = $('.scroll-down i') header = $('header'), heroContent = $('.hero-content'), logoContainer = $('.logo-container'), logo = $('#hype-logo'), letter = $('.letter'), letterFill = $('.letter_fill'), logoBorderBottom = CSSRulePlugin.getRule(".logo-container:after"), overlayMenu = $("#overlay-menu"), listItemsOverlay = $("#overlay-menu #primaryMenu ul li"), heroBackground = CSSRulePlugin.getRule(".hero-panel:before"); var fadeSlogan = function () { TweenMax.to(header, 1, { y: 0, autoAlpha: 1 }); TweenMax.to(heroContent, 1, { y: 0, autoAlpha: 1 }); TweenMax.to(scrollDown, 1, { y: 0, autoAlpha: 1 }); }; function urlChecker() { if( window.location.href =="http://2017.hypemarketing.uk/" ) { var otherAnimations = new TimelineMax({ immediateRender: true }); // Start New timeline for all other animations otherAnimations .set(heroBackground, { opacity: 1 }) //has been set in css to remove skip .set(logo, {visibility:"visible"}) .set(letterFill, {visibility:"hidden"}) .set(header, {y: -80, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }) .set(heroContent, {y: -15, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }) .set(scrollDown, {y: 30, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }); } else { //Do nothing } } urlChecker(); // TweenMax Timelines var timelineHero = new TimelineMax({ immediateRender: true }); // Start New timeline for Hero Section & Portfolio var entranceAnim = new TimelineMax({ immediateRender: true }); // Start New timeline for Entrance Anim timelineHero .set(heroSection, { top: 0, position: 'absolute', force3D:"auto" }) .to(heroSection, 0.4, { top: -viewPort, opacity: 0, ease: Power2.easeInOut }); // Animation for timelineHero entranceAnim .set(logoBorderBottom, { ease: Power2.easeOut, force3D:"auto" }) .set(letter, {fill:"none", force3D:"auto", stroke: "00ffbc", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round"}) .fromTo(letter, 3, {drawSVG:0}, {drawSVG:"102%"}, 0) //now animate the logo strokes (note we use "102% as FireFox 34 miscalculates the length of a few strokes) .fromTo(logoBorderBottom, 3, { width: 0 }, { width: 100 + "%" }, 0) //draw out the load under hype .to(letterFill, 1, {autoAlpha:1, ease:Linear.easeNone}) //fade in the real logo and the rest of the text .to(letter, 1, { stroke: "ffffff;", ease:Linear.easeNone }) //fade the stroke to white .to(heroBackground, 3, { opacity: 0.9, ease: Power1.easeIn, onComplete: fadeSlogan }, 0.3); //fade the background // Scroll Magic Scenes var heroAnimation = new ScrollMagic.Scene({ triggerElement: heroSection, triggerHook: 0, duration: 1 }).setPin(heroSection).setTween(timelineHero).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Hero Section var portfolioSectionAnimation = new ScrollMagic.Scene({ duration: viewPort/2 }).setPin('.portfolio-section', { pushFollowers: true }).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Portfolio Section // Scroll Down Button Begin TweenMax.set(scrollDownArrow, { transform: 'translateY(0)' }); TweenMax.to(scrollDownArrow, 1, { autoAlpha: 0, repeat: -1, transform: 'translateY(10px)' }); scrollDown.click(function(){ TweenLite.to(window, 0, {scrollTo:1}); // Scrolls 1px on scroll to initiate the Hero Section sliding out }); // Scroll Down Button End });
  4. I've been working on an animation that works standalone as expected on scroll, it basically staggers on scroll so each path in my SVG animated in fast fade on scroll down, and fade out on scroll up. I was looking at this article but cannot work out how to import the scripts and get it running via RequireJS like I can standalone: https://github.com/janpaepke/ScrollMagic/issues/160#issuecomment-59058452 Here is my code example, it's WIP so the code is not absolutely correct yet. require.config({ baseUrl: '../ScrollMagic/js', paths: { TweenMax: '_dependent/greensock/TweenMax.min', TimelineMax: '_dependent/greensock/TweenMax.min', ScrollMagic: 'jquery.scrollmagic', ScrollScene: 'jquery.scrollmagic', "ScrollMagic.debug": 'jquery.scrollmagic.debug', jquery: '_dependent/jquery.min' } }); require(['jquery', 'ScrollMagic', 'ScrollScene', 'ScrollMagic.debug'], function( $, ScrollMagic, ScrollScene, debug) { // do stuff }); This is a cut down version of my working code: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> <script> // init controller var controller = new ScrollMagic.Controller(); </script> <div class="spacer s_viewport"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve"> <g id="mainsvg"> <path d="..." /> <!-- x27 of these pathes --> </g> </svg> <script> // build tween var tween = TweenMax.staggerFromTo("path", 2, { opacity: 0 }, { opacity: 1, ease: Back.easeOut }, 1); // build scene var scene = new ScrollMagic.Scene({ triggerElement: "#mainsvg", duration: 200 }) .setTween(tween) .addIndicators({ name: "staggering" }) // add indicators (requires plugin) .addTo(controller); </script> <div class="spacer s_viewport marker"></div> Can anyone help please? Thanks in advance!
  5. Hi, We are having issues trying to finesse a card folding animation. Basically we would like to have a square with sides folding out from within the square to create an unfolding effect. If you take a look at the Codepen you should be able to get an idea of the effect. We are currently using scaleX but unsure if this is the best and way to achieve this type of effect? Many Thanks
  6. Hello, guys. I know I could post this on some job boards, but just wanted to give it a try here. I noticed that on this forum people discuss three.js sometimes. And there is a project I need help with. Commercial project — no free work There will be website with swimming pool constructor on it. Initially we planned to make it flat. But I'd like to go further and make it as dynamic 3D model directly in browser. So I'm looking for a specialist who has experience with three.js and GSAP to help me with this part of the project. I already have scope of work composed for coder. I will send it to those who are interested. You just need to let me know whether you're interested either in this topic or in personal messages. And here is a small teaser of the project
  7. Hi everybody, im new on gsap...playing with threejs, tween and audio visualizer. I have a group with some mesh as child 1 - I would like to animate each element of the mesh with a value created in RAF . 2 - I would like to make endless tween on rotation (unfortunally , "repeat: -1" its not working). Is there another elegant / better solution for do that. Thanks in advance for any help... On RAF i have some function: 1 for render() three scene and one for analyze the sound and pass the value on tween. So this... // The sound analyzer . function soundAnalyzer() { if ((cristal)&&(frequencyData)){ tl_cristal_rotationX = new TimelineMax({repeat:-1 }); analyser.getByteFrequencyData(frequencyData); if(typeof frequencyData === 'object' && frequencyData.length > 0) { scale_value = 9000 - frequencyData[1] * 35 ; scale_value_Low = 1800 - frequencyData[1] * 5 ; cristal.traverse( function ( child ) { if ( child instanceof THREE.Mesh ) { tl_cristal_rotation = new TimelineMax(); tl_cristal_rotation.to(child.rotation, scale_value_Low, { ease: Linear.easeNone, x: -360 , y: -360, repeat:-1 }) } }); tl_cristal_rotationX.to(cristal.rotation, scale_value , { ease: Linear.easeNone, x: -360 }) } } } // and here RAF loop and Render // animation loop function animate() { if(dae) { soundAnalyzer() } requestAnimationFrame( animate ); render(); stats.update(); } TweenLite.ticker.addEventListener("tick", render); //and render the scene function render() { renderer.clear(); camera.position.x += ( mouseX - camera.position.x ) * .015; camera.position.y += ( - mouseY - camera.position.y ) * .015; camera.lookAt(scene.position); composer.reset(); composer.render(scene, camera); composer.pass(OldVideoPass); composer.pass(BrightnessContrastPass); composer.pass(RGBSplitPass); composer.toScreen(); } Thank u very much and sorry for my English.. hope is readable..
  8. hello! Just getting starting with JS and GSAP, had a question about what I'm trying to achieve: There's a GSAP 360 slider of a image sprite created here: http://codepen.io/jamiejefferson/pen/IeLGB if you swipe / mouse drag you cursor over the sprite, it animates through the sprite creating the 360 view. I wanted to add a input slider such that the input slider could also be dragged / swiped on as an additional way of advancing through the sprite sequence. The final sequence i'm trying to get to work with the swiping + input slider is something like this : https://codyhouse.co/demo/360-degrees-product-viewer/index.html Any way to append a HTML slider to that GSAP 360 mentioned earlier? Sorry about the noob question, any inputs would be super helpful! Thanks!
  9. Does Greensock's "No charge" license covers support for envato marketplaces? I want to make a Wordpress Theme/Plugin which will use GSAP as it's animation core and sell it to Themeforest/Codecanyon. As the "No charge" license states that: You may use the code at no charge in commercial or non-commercial apps, web sites, games, components, and other software as long as end users are not charged a fee of any kind to use your product or gain access to any part of it. If your client pays you a one-time fee to create the site/product, that's perfectly fine and qualifies under the "no charge" license. If end users are charged a usage/access/license fee, please sign up for a "Business Green" Club GreenSock membership which comes with a comprehensive commercial license. See http://greensock.com/club/ for details. Use at your own risk. No warranties are offered. Please respect the copyright. Am I allowed to perform my submission to those marketplaces obeying the above terms?
  10. I am trying animating a bunch of objects staggering one by one, but i want to do multiple things to do to a single element and i cant find a way. For example say, I have ten cubes, first of all i want the first cube to rotate 45 deg in X then it goes y = -400 then it comes back y=200 and then it rotates back 45deg and the same things happen to the following cubes after wards. So, essentially there are 4 steps i need to define. If i use staggerFrom it places me from one point to Original one, If i use staggerFromTo its again two way , and i cant chain them as the second will only start after the first staggerFrom finishes (i.e., all the ten cubes finish step 1). So tell me a way in code to do this. As I am pretty new doing these i can't really figure out a way to do this. But I know it is doable as i have seen all the crazy impossible stuff's done with gsap w/o a hiccup, and this is something simple that can be also done with css (but it will be too time consuming). So.. I am waiting for some cool animating and tips to be made.
  11. Hi all, My goal for this animation is for the div to slide over when clicked, and then for the timeline to reverse back to start when the back arrow is clicked, and be able to be played again. The play function works, but the reverse does not even though it is set up the same way. What am I doing wrong? I also checked this codepen made by GreenSock: http://codepen.io/GreenSock/pen/LbezE?editors=001 It seems to be set up the same way as my functions. Let me know what I'm missing. Thanks! My CodePen: http://codepen.io/karlshaver/pen/bgervY
  12. GreenSock

    CustomBounce

    GSAP always had the tried-and-true "bounce" ease, but there was no way to customize how "bouncy" it was, nor could you get a synchronized squash and stretch effect during the bounce because: The "bounce" ease needs to stick to the ground momentarily at the point of the bounce while the squashing occurs. Bounce.easeOut offers no such customization. There was no way to create the corresponding [synchronized] scaleX/scaleY ease for the squashing/stretching. CustomEase solves this now, but it'd still be very difficult to manually draw that ease with all the points lined up in the right spots to match up with the bounces. With CustomBounce, you can set a few parameters and it'll create BOTH CustomEases for you (one for the bounce, and one [optionally] for the squash/stretch). Think of CustomBounce like a wrapper that creates a CustomEase under the hood based on the variables you pass in. Note that this video uses GSAP 2's format. Options strength (Number) - A number between 0 and 1 that determines how "bouncy" the ease is, so 0.9 will have a lot more bounces than 0.3. Default: 0.7 endAtStart (Boolean) - If true, the ease will end back where it started, allowing you to get an effect like an object sitting on the ground, leaping into the air, and bouncing back down to a stop. Default: false squash (Number) - Controls how long the squash should last (the gap between bounces, when it appears "stuck"). Typically 2 is a good number, but 4 (as an example) would make the squash longer in relation to the rest of the ease. Default: 0 squashID (String) - The ID that should be assigned to the squash ease. The default is whatever the ID of the bounce is plus "-squash" appended to the end. For example, CustomBounce.create("hop", {strength:0.6, squash:2}) would default to a squash ease ID of "hop-squash". How do you get the bounce and the squash/stretch to work together? You'd use two tweens; one for the position ("y"), and the other for the scaleX/scaleY, with both running at the same time: //Create a custom bounce ease: CustomBounce.create("myBounce", {strength:0.6, squash:3, squashID:"myBounce-squash"}); //do the bounce by affecting the "y" property. gsap.from(".class", {duration: 2, y:-200, ease:"myBounce"}); //and do the squash/stretch at the same time: gsap.to(".class", {duration: 2, scaleX:140, scaleY:60, ease:"myBounce-squash", transformOrigin:"center bottom"}); How to get CustomBounce CustomBounce is a membership benefit of Club GreenSock. Once you're a member, you can simply log in and download it from your Account Dashboard anytime, or use our private NPM repository. See the install page for details. Also note that CustomBounce requires CustomEase. Demos 
 CustomBounce Demos
  13. GreenSock

    CustomWiggle

    CustomWiggle extends CustomEase (think of it like a wrapper that creates a CustomEase under the hood based on the variables you pass in), allowing you to not only set the number of wiggles, but also the type of wiggle (there are 5 types; see demo below). Advanced users can even alter the plotting of the wiggle curves along either axis using amplitudeEase and timingEase special properties. Note that the video is using GSAP 2 format. Demo: CustomWiggle Types Options wiggles (Integer) - Number of oscillations back and forth. Default: 10 type (String) "easeOut" | "easeInOut" | "anticipate" | "uniform" | "random" - tThe type (or style) of wiggle (see demo above). Default: "easeOut" amplitudeEase (Ease) - Provides advanced control over the shape of the amplitude (y-axis in the ease visualizer). You define an ease that controls the amplitude's progress from 1 toward 0 over the course of the tween. Defining an amplitudeEase (or timingEase) will override the "type" (think of the 5 "types" as convenient presets for amplitudeEase and timingEase combinations). See the example codepen to play around and visualize how it works. timingEase (Ease) - Provides advanced control over how the waves are plotted over time (x-axis in the ease visualizer). Defining an timingEase (or amplitudeEase) will override the "type" (think of the 5 "types" as convenient presets for amplitudeEase and timingEase combinations). See the example CodePen to play around and visualize how it works. How do you control the strength of the wiggle (or how far it goes)? Simply by setting the tween property values themselves. For example, a wiggle to rotation:30 would be stronger than rotation:10. Remember, and ease just controls the ratio of movement toward whatever value you supply for each property in your tween. Sample code //Create a wiggle with 6 oscillations (default type:"easeOut") CustomWiggle.create("myWiggle", {wiggles:6}); //now use it in an ease. "rotation" will wiggle to 30 and back just as much in the opposite direction, ending where it began. gsap.to(".class", {duration: 2, rotation:30, ease:"myWiggle"}); //Create a 10-wiggle anticipation ease: CustomWiggle.create("funWiggle", {wiggles:10, type:"anticipate"}); gsap.to(".class", {duration: 2, rotation:30, ease:"funWiggle"}); Wiggling isn't just for "rotation"; you can use it for any property. For example, you could create a swarm effect by using just 2 randomized wiggle tweens on "x" and "y", as demonstrated here. Download CustomWiggle CustomWiggle and CustomBounce are membership benefits of Club GreenSock. It's our way of saying "thanks" to those who support GreenSock's ongoing efforts. Joining Club GreenSock gets you a bunch of other bonus plugins and tools like MorphSVGPlugin as well, so check out greensock.com/club/ for details and sign up today. Note: CustomWiggle is not in the GitHub repository or CDN; it's only available for download at GreenSock.com. Demos 
 CustomWiggle Demos
  14. Hi all! I'm new to GSAP - are studying it. I found this example of the banner - http://gsap-banner.getforge.io/. However, this banner needs to be redone. Said that it was necessary - "Need to size it down for adwords, and also make a few variations". But please tell me, I don't know what I need to change in this banner? I need to make changes - just tell me, please, what should I do and what changes to make?
  15. Hi guys! I am new to Greensock and I am so amazed about the power it has. I started to learn how to use it and during one of an example project I found a problem in which I can't go on. The problem: I have a panoramic photo, that is bigger than the screen and I want to use TweenMax to move over it and show also the hidden part, till now is everything ok, the problems come if I want to move to the same direction more than one time. For example when I want to discover the right part of the image and I push on my arrow button to move right the first time I push it works, but the second time I push it doesn't move again. Surely is a much more simple problem than how I think but I would really want to know if is normal that doesn't work more than once. Here there is the code of the Tweens: $('#frecciaDx').on('click', function () { TweenMax.fromTo("#stanza", 0.8, {css:{marginLeft:0}}, {css:{marginLeft:-200}}); }); $('#frecciaSx').on('click', function () { TweenMax.fromTo("#stanza", 0.8, {css:{marginLeft:0}}, {css:{marginLeft:200}}); }); $('#frecciaSu').on('click', function () { TweenMax.to("#stanza", 0.8, { y: 600 }); }); $('#frecciaGiu').on('click', function () { TweenMax.to("#stanza", 0.8, { y: -600 }); }); Thank you really much guys!
  16. 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. Have you ever tried getting a realistic wiggle effect or tweaking just how bouncy an ease is? What about adding squash and stretch to a bounce? These are not easy tasks. Well, until now. Even though CustomEase, lets you create literally any easing effect that you can imagine (bounces, wiggles, elastic effects, whatever) by drawing them, it's difficult to plot a complex wiggle or bounce while making sure all the points are spaced correctly. Wouldn't it be nice if you could just set a few parameters (like number of wiggles or bounciness) and have that complex easing curve created for you? Wish granted. CustomWiggle CustomWiggle extends CustomEase (think of it like a wrapper that creates a CustomEase under the hood based on the variables you pass in), allowing you to not only set the number of wiggles, but also the type of wiggle (there are 5 types; see demo below). Advanced users can even alter the plotting of the wiggle curves along either axis using amplitudeEase and timingEase special properties (see the docs for details). Demo: CustomWiggle Types See the Pen CustomWiggle Demo : resized by GreenSock (@GreenSock) on CodePen. Options wiggles (Integer) - number of oscillations back and forth. Default: 10 type (String) "easeOut" | "easeInOut" | "anticipate" | "uniform" | "random" - the type (or style) of wiggle (see demo above). Default: "easeOut" amplitudeEase (Ease) - provides advanced control over the shape of the amplitude (y-axis in the ease visualizer). You define an ease that controls the amplitude's progress from 1 toward 0 over the course of the tween. Defining an amplitudeEase (or timingEase) will override the "type" (think of the 5 "types" as convenient presets for amplitudeEase and timingEase combinations). See the example codepen to play around and visualize how it works. timingEase (Ease) - provides advanced control over how the waves are plotted over time (x-axis in the ease visualizer). Defining an timingEase (or amplitudeEase) will override the "type" (think of the 5 "types" as convenient presets for amplitudeEase and timingEase combinations). See the example codepen to play around and visualize how it works. How do you control the strength of the wiggle (or how far it goes)? Simply by setting the tween property values themselves. For example, a wiggle to rotation:30 would be stronger than rotation:10. Remember, an ease just controls the ratio of movement toward whatever value you supply for each property in your tween. Sample code //Create a wiggle with 6 oscillations (default type:"easeOut") CustomWiggle.create("myWiggle", {wiggles:6}); //now use it in an ease. "rotation" will wiggle to 30 and back just as much in the opposite direction, ending where it began. TweenMax.to(".class", 2, {rotation:30, ease:"myWiggle"}); //Create a 10-wiggle anticipation ease: CustomWiggle.create("funWiggle", {wiggles:10, type:"anticipate"}); TweenMax.to(".class", 2, {rotation:30, ease:"funWiggle"}); Wiggling isn't just for "rotation"; you can use it for any property. For example, you could create a swarm effect by using just 2 randomized wiggle tweens on "x" and "y", as demonstrated here. CustomBounce GSAP always had the tried-and-true Bounce.easeOut, but there was no way to customize how "bouncy" it was, nor could you get a synchronized squash and stretch effect during the bounce because: The "bounce" ease needs to stick to the ground momentarily at the point of the bounce while the squashing occurs. Bounce.easeOut offers no such customization. There was no way to create the corresponding [synchronized] scaleX/scaleY ease for the squashing/stretching. CustomEase solves this now, but it'd still be very difficult to manually draw that ease with all the points lined up in the right spots to match up with the bounces. With CustomBounce, you can set a few parameters and it'll create BOTH CustomEases for you (one for the bounce, and one [optionally] for the squash/stretch). Again, think of CustomBounce like a wrapper that creates a CustomEase under the hood based on the variables you pass in. Options strength (Number) - a number between 0 and 1 that determines how "bouncy" the ease is, so 0.9 will have a lot more bounces than 0.3. Default: 0.7 endAtStart (Boolean) - if true, the ease will end back where it started, allowing you to get an effect like an object sitting on the ground, leaping into the air, and bouncing back down to a stop. Default: false squash (Number) - controls how long the squash should last (the gap between bounces, when it appears "stuck"). Typically 2 is a good number, but 4 (as an example) would make the squash longer in relation to the rest of the ease. Default: 0 squashID (String) - the ID that should be assigned to the squash ease. The default is whatever the ID of the bounce is plus "-squash" appended to the end. For example, CustomBounce.create("hop", {strength:0.6, squash:2}) would default to a squash ease ID of "hop-squash". How do you get the bounce and the squash/stretch to work together? You'd use two tweens; one for the position ("y"), and the other for the scaleX/scaleY, with both running at the same time: //Create a custom bounce ease: CustomBounce.create("myBounce", {strength:0.6, squash:3, squashID:"myBounce-squash"}); //do the bounce by affecting the "y" property. TweenMax.from(".class", 2, {y:-200, ease:"myBounce"}); //and do the squash/stretch at the same time: TweenMax.to(".class", 2, {scaleX:140, scaleY:60, ease:"myBounce-squash", transformOrigin:"center bottom"}); See the Pen CustomBounce from GreenSock by GreenSock (@GreenSock) on CodePen. Where can I get it? CustomWiggle and CustomBounce are membership benefits of Club GreenSock ("Shockingly Green" and "Business Green" levels). It's our way of saying "thanks" to those who support GreenSock's ongoing efforts. Joining Club GreenSock gets you a bunch of other bonus plugins and tools like MorphSVGPlugin as well, so check out greensock.com/club/ for details and sign up today.
  17. I'm having a few problems getting the animation to reverse back to the origianl state when the mouse is moved. Currently the code just snaps back to the icons original state.becomes a bit jumping when you have multiple aniamtions on each page. Is the away so that when the mouse is removed either the animation finishes out the sequence or is reversed back to the original state. (istead of snapping back Kind regards, Ryan
  18. Hey everyone, I have hit a snag in my development. I have created a new timeline that i want to repeat once it finishes.It seemingly works but for some reason it doesn't start the repeat from the first tween but instead the second tween in the list tlMain = new TimelineMax({repeat:-1}); tlMain //I WANT the repeat to start from here in the timeline and play ALL tween below BUT... .fromTo(Pocket, 0.5, {scaleX: 3, scaleY: 3, autoAlpha: 0}, {scaleX: 1, scaleY: 1, autoAlpha: 1}) //Repeat seems to start here in the timeline instead, skipping the first part of my animation .fromTo(Pocket, 0.1, {scaleX: 1, scaleY: 1}, {scaleX: 1.04, scaleY: 1.04}, '-=0.05') .fromTo(Pocket, 0.15, {scaleX: 1.04, scaleY: 1.04}, {scaleX: 1, scaleY: 1}, '-=0.05') .fromTo(Crumbs1, 0.1, {x: '-10px', scaleX: 1.01, scaleY: 1.01, autoAlpha:0}, {x: '-5px', scaleX: 1, scaleY: 1, autoAlpha:1},"-=0.15") .fromTo(Crumbs2, 0.1, {x: '-10px', scaleX: 1.01, scaleY: 1.01, autoAlpha:0}, {x: '-5px', scaleX: 1, scaleY: 1, autoAlpha:1},"-=0.2") .fromTo(Crumbs3, 0.1, {x: '-10px', scaleX: 1.01, scaleY: 1.01, autoAlpha:0}, {x: '-5px', scaleX: 1, scaleY: 1, autoAlpha:1},"-=0.3") .fromTo(LogoContainer, 1, {y: '-175px'}, {y: '0px'}) .fromTo(line1, 0.25, {x: '-5px', autoAlpha:0}, {x: '0px', autoAlpha:1}) .fromTo(line2, 0.25, {x: '-5px', autoAlpha:0}, {x: '0px', autoAlpha:1}) .fromTo(line3, 0.25, {x: '-5px', autoAlpha:0}, {x: '0px', autoAlpha:1}) .repeat(-1).repeatDelay(2)//Repeat Call can anyone see why it repeats starting after the first tween instead of starting from the very beginning of the timeline?
  19. 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. Are your animations meant to feel playful? Robotic? Slick? Realistic? If they had a voice, what would they sound like? To become an animation rock star, you must develop a keen sense of easing because that's what determines the style of movement between point A and point B. GreenSock's new CustomEase frees you from the limitations of canned easing options. Create literally any ease imaginable. Zero limitations. CSS animations and WAAPI offer cubic-bezier() which is great but with only two control points it's impossible to create more complex effects like bouncing, elastic, wiggles, rough/jerky eases, etc. Plus you can't make an ease return to its starting values (like a ball jumping into the air and falling back to the ground with a bounce). Features Unlimited anchors and control points. Copy/Paste any SVG <path> (including direct copy/paste from Adobe Illustrator). Use CSS cubic-bezier() values (For example, from cubic-bezier.com). Editor has snapping, undo, sample code and other conveniences. Start with any standard ease and customize it. getSVGData() method turns any ease into SVG <path> data for display at the size you define. Extremely optimized for runtime performance. Free for anyone with a GreenSock account. Reading Ease Curves, Editing, and Using CustomEase Here's an in-depth video tour that'll get you up to speed with exactly how to use CustomEase: Ready to play? Check out the new Ease Visualizer with CustomEase support. Click "Custom" to edit the curve as much as you want: Simple Example See the Pen Video: Single Tween with CustomEase by GreenSock (@GreenSock) on CodePen.&#13;We strongly recommend creating your CustomEases initially (rather than in each tween) to maximize performance and readability. You then reference them by ID in your tweening code. When an ease is created, it must parse through the points and do various calculations to prepare for blisteringly fast runtime performance during the animation, so executing those calculations when your page/app loads is typically best. Download CustomEase To get CustomEase, you must have a GreenSock account which is completely free to set up. Plus it gets you access to our community forums (a fantastic place to learn and get your questions answered). The widget below lets you sign up or if you're already logged in, it'll give you immediate access to the download zip that contains CustomEase in the "easing" directory. Note: CustomEase is not in the github repository or CDN; it's only available for download at GreenSock.com. [loginwidget]
  20. Hey, I'm having some trouble with GSAP and the .staggerTo. The fact is : the staggerTo is working the first time I'm hovering an element and it's unstaggering as I want when I leave the el but when I'm hovering it again the staggerTo isn't working anymore ! Here the code : for (var i = 0; i < hexagons.length; i++) { hexagons[i].addEventListener('mouseenter', function(e) { var propSelected = this.dataset.prop, links = this.querySelectorAll('.mini_vid_link'); function findProp(prop) { return prop.prop === propSelected; } var thisProp = propositionsVideos.find(findProp); videosBg.style.background = "url(" + thisProp.background + ") center center no-repeat"; videosBg.style.backgroundSize = "cover"; if (thisProp.orientiation === 'left'){ tl.to(videosBg, 0.6, { x: 0, autoAlpha: 1, ease: Power3.easeIn }, 0) .staggerTo(links, 0.6, { x:-20, autoAlpha: 1, scale:1, ease: Elastic.easeInOut.config(1, 0.3) }, 0.2, 0) } else { tl.to(videosBg, 0.6, { x: 0, autoAlpha: 1, ease: Power3.easeIn }, 0) .staggerTo(links, 0.6, { x:20, autoAlpha: 1, scale:1, ease: Elastic.easeInOut.config(1, 0.3) }, 0.2, 0) } }, false); } for (var i = 0; i < hexagons.length; i++) { hexagons[i].addEventListener('mouseleave', function(e) { var propSelected = this.dataset.prop, links = this.querySelectorAll('.mini_vid_link'); function findProp(prop) { return prop.prop === propSelected; } var thisProp = propositionsVideos.find(findProp); if (thisProp.orientiation === 'left'){ tl.to(videosBg, 0.3, { x: 30, autoAlpha: 0, ease: Power3.easeOut }) .staggerTo(links, 0.6, { x:20, autoAlpha: 0, scale:0.8, clearProps: 'all', ease: Sine.easeOut }, 0.2, 0) } else { tl.to(videosBg, 0.3, { x: 30, autoAlpha: 0, ease: Power3.easeOut }) .staggerTo(links, 0.6, { x:-20, autoAlpha: 0, scale:0.8, clearProps: 'all', ease: Sine.easeOut }, 0.2, 0) } What i'm doing wrong ?
  21. Hello all, In my project, there will be many gsap timelines for different elements, and I will call them at different times. For these timelines will be used for many times, I want to save them in a global variables instead of calculated them each time. But it works with an unexpected behavior. It just run to the end state of the timeline directly without any animations. Does the timeline will be destoryed after animating each time?Any help very much appreciated! Just like the simple code below: var Timelines = {}; function getTimeline(_element, _props){ var tl = new TimelineMax({paused:true}); tl.to(_element, 1, _props, 0); Timelines[elementId] = tl; } $(el).click(function(){ var tl = Timelines[elId]; if(!tl){ tl = getTimeline(el, _elProps); } tl.play(); }) Looking forward to your reply. Thank you very much.
  22. Hi All I'm sorry if this is an easy solution but I couldn't find it and I'm totally new. I have several elements with an infinite rotation but for some reason is working only the first one. Here is my code: (function($) { var green = $('.green'), red = $('.red'), brown = $('.brown'), // tl = new TimelineLite(); tl = new TimelineLite(); tl .to(red, 3, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }) .to(green, 1, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }, "-=0.15") .from(brown, 3.5, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }, "-=0.15"); })(jQuery); Thank you so much for your help!
  23. Hi, all. I just started to learn GSAP, and I got a problem with the connection MorphSVGPlugin library. I use these plugins <script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script> <script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js"></script> But when I watching moving about MorphSVG I could not connect properly library. Can you help me to fix this problem?
  24. im try to fire timeline when a li it's hover, so i create a var with my timeline, and with event.delegateTarget to find children and not all with .CLASS this is my code $(".gb-help-list ").on('mouseover', 'li', function (e) { console.log('mouse'); var tl = new TimelineLite(); tl.to($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut}) .to(".line-help", 2, {width: '100%', ease: Power4.easeOut}, "-=1"); }).on('mouseout', 'img', function (e) { TweenLite.to($(e.delegateTarget).find('span'), 1.5, {opacity:0}); }); I don't see any error in console, but this : o($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut} doesn't fire.... anyone can helpme? Thx in advance
  25. Hello guys, I recently started developing with GSAP and i love it so far, its really great but my problem is that i am not able to change the anchor point of the circle... even if we assign a top, left and bottom anchor point to it it just takes the default anchor point on the circle due to this issue the animation isn't the same on both sides and it looks really weird. does someone know how to fix this issue? i also saw a solution over here from OSUblake, but i am not able to figure out how to make that work http://greensock.com/forums/topic/14129-morphsvg-change-start-and-end-point/ kind regards
×