Jump to content
GreenSock

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

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

  • FAQ Landing Page

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

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. GSAP 3 is the most significant upgrade we have ever had. With 50+ new features, there's a lot to be excited about. Here are a few of the highlights: Check out the full demo collection for more. A special shout-out to @dsenneff who created the animation at the top of this page! Jump right in - here's a starter codepen: See the Pen Try GSAP 3 on CodePen by GreenSock (@GreenSock) on CodePen. More ways to play: GSAP 3 Starter Pen - Fork the CodePen and away you go. Download the files to use locally. Using a build tool? npm install gsap will get
  2. Hello I have to do a airplane that fly vertically left and right whenever the user scrolled, I already did it with Scroll magic and I can't figure how to do it right, i know the problem is on the path it must take full height of my container but i don't know how to do it do you have any idea guys I've been stacked for 2 days Thank you
  3. Hello. This is a basic question regarding my StaggerTo animations. For scope of this, I'm using 2.x still and am using StaggerTo to animate a hand of cards and all of them work beautifully when adding new references to the array. When adding a reference/element to the middle of any stagger or removing an element from an array, I get some experiences I didn't expect. Delete from the array: It doesn't animate out or in reverse as I expected, it just "pops" out of existence. Example: https://gyazo.com/a6cb14ef2b75f9dd40eaf4393581db93 Add to middle of an array: The index a
  4. Hi I have three card elements with hover animations and they are not working as expected, they have glitches. When hovering over a card element the animations works but when you mouse out or mouse over again it freaks out and all three elements play. Could i please get some assistance.
  5. Hey Superhero, I'm totally new for Awesome GSAP and just start learning with create sample website. so please check out this website https://wickret.cuberto.com Give me suggestions to create this all animations which is used by above website.
  6. Upgrading your project from using GSAP 2 to GSAP 3? It's easy. Most legacy code is already 100% compatible, but there are a few key differences to keep in mind. This guide will help move from GSAP 1.x/2.x to the all-new (and very exciting) GSAP 3. Quick links: New Tween/Timeline Syntax Duration Easing Staggers Overwriting Plugins Cycle Ticker Defaults Callback scope ThrowPropsPlugin renamed InertiaPlugin Other things to keep in mind Frequently Asked Questions More information New Tween/Timeline Syntax
  7. Hi, I wander how can I make the delay prop work every time I call .play() method. I also tried to chain the .delay(s) method like tween.delay(1).play() but it did't work. ☹️ Someone more experienced can help me pls? Thanks
  8. GreenSock

    GSAP 3.1 Released

    GSAP 3.1 has landed with some exciting new features and various bug fixes. We highly recommend updating at your earliest convenience. Here are a few highlights: Random staggers GSAP’s staggers get even more powerful. Use the new from: “random” option to randomize how the staggers get applied. See the Pen GSAP from: "random" stagger by GreenSock (@GreenSock) on CodePen. Learn more about the advanced staggering options available in GSAP 3 below. See the Pen GSAP 3.0 Stagger demo by GreenSock (@GreenSock) on CodePen. shuffle() any Array The new
  9. Hi, I have a spin to wheel animation which I found elsewhere on this forum. My use case is a bit different though as I would like to keep the wheel spinning while I make a request to a server which will tell me which slice the animation should land on and then manually stop the wheel but slowly. The issue is my animations end up being choppy since I am changing the easing functions. Any tips anyone might have to make this work smoothly would really be appreciated.
  10. I am creating a drag & drop exercise. When the user is done dragging, the dragged object should automatically animate to its target. This works correctly in normal circumstances. However, when the parent container is scaled, the calculation for determining the target position does not work and the dragged object does not land correctly on the target. I thought it might be related to dragging using x and y, so I changed the code to use left and top. I still have the same issue. You can see the issue in the CodePen. The viewport container element automatic
  11. Hello, In the learning process of React + GSAP and I've run into a situation where I can't find the easy solution. Should be a quick answer In previous projects, (javascript + html for example) I would write up a timeline, then set an array of elements with a { clearProps: "all" } to essentially reset it The code I'm working with now is React with inline styles. It seems that clearing the props in the same fashion removes all of the inline styles, and since it's not set in a css sheet, the animation doesn't reset but breaks and it seems this is working as
  12. Hello Here are different versions of gsap. when gsap 2.0.2 is used text is text hover effect is showing correctly, https://codepen.io/Sarvarkhuja/pen/dyPjPVg However, when i update gsap version to 3.0.5, opacity of text is being set to 0 https://codepen.io/Sarvarkhuja/pen/ExadQjw I would appreciate any help to get the same result in the latest gsap version regards
  13. Hi, I have created a gsap animation in my website. Inorder for it to autoplay i have not specified the duration while creating the scrollmagic scene. Now the animation is autoplaying (which is the intended effect if was going for) but now the section stays locked in place since there is no duration to tell the animation that it is over. So currently, the next elements are being overlapped by the pinned element. How can i fix this ? How can i unpin the element after the animation ?
  14. Hi all, I have a client who has a Business membership and they host the files on their own CDN. Unfortunately, they never update the versions. TimelineMax is v1.20.3 and MorphSVGPlugin is v0.8.11 I've requested they update the files, and they say they will, but this is a HUGE tech corporation with a HUGE tech bureaucracy and nothing is ever quick! So my question is -- how do I register a plugin (and use it) in this version? The plugin file does not expose window.MorphSVGPlugin so there's no apparent way to register it as it is undefined. This is my code as
  15. I am trying to make a simple overlay transition effect with barba and gsap. when I click on the Page 02 link the overlay transition effect move across the page from left to right but the page did not change, I will have to click on the link the second time for the page to change how can I fix this thanks. Barba.Pjax.start(); var FadeTransition = Barba.BaseTransition.extend({ start: function() { Promise .all([this.newContainerLoading, this.fadeOut()]) .then(this.fadeIn.bind(this)); }, fadeOut: function() { const TransitionPromise = new Prom
  16. Hi, Anyone got any ideas as to why this doesn't work? CSS version is correct, GSAP is not. z:200 is not doing anything? gsap.to(box1, { duration: 2, x: 200, z: 200, // Not working?? rotationY: 360, backgroundColor: "#000000", color: "#FFFFFF" }); Thanks D
  17. Hello everyone here! I am planning to make custom free unofficial plugin for GSAP (it would be nice to make official plugin). But my only problem is where do I start? There's no documentation on how to make own/custom plugin for GSAP. I would like to make some free custom plugin for GSAP for the purpose to extend the abilities and powers of GSAP. I already create a repo for my plugin project for GSAP and I am inviting you guys to contribute! Any suggestions would be great! Calling for @Jack, @Carl and @Jonathan (They are GSAP legends) Github Repository: https://github.com/WarenGonzaga
  18. Have you ever noticed an annoying "flash of unstyled content" (FOUC) when a web page first loads? That happens because browsers render things as quickly as possible, often BEFORE your JavaScript executes the first time. So what if some of your initial styles are set via JavaScript...like with GSAP? Solution: apply visibility: hidden; to your elements in CSS and then use GSAP's autoAlpha property to show it (or animate it in) when the page loads. autoAlpha affects opacity and visibility, changing it to visible when the opacity is greater than 0. Pretty convenient! Check out this vide
  19. Hi everyone, Please i need to know if Dynamic (feed driven) Google DoubleClick banners can be hand coded and not created using Google Web Designer. If so does anyone have any base templates to start from. I hand code everything using GSAP and i just want to inject the data using Javascript and not be tied down to Google Web Designer. I am willing to pay for Live Online training for someone who can help me with this or even doing builds in Google Web Designer and adding custom code. Any help would be much appreciated. Thanks Brad
  20. I am trying to transition between 2 <section> elements which is not working correctly. All my other code works great, it's just this gsap part giving me grief. I am passing the fromSection and toSection into a function see below, I am wanting the fromSection to fade away and hide the element, then show the toSection with elastic ease. The issue seems to be with the hide() not being applied on each onComplete and the new section with display:none still active. Any help would be appreciated.
  21. Hello sorry for asking I am new to GSAP and JS. How can I stop fullpage.js from scrolling if my animation is not complete Please help. Thank you. P.S: I am using TimelineMax.
  22. I'm trying to make animation like this. First of all, i wanna create smooth move of green div like in example. Here is my try : https://codepen.io/eugenedrvnk/pen/VwwqaBp If compare my and example's animation, in example it's more smoothly. How can i make my anim more similar to an example?
  23. 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
  24. GreenSock

    Ease Visualizer

    The ease-y way to find the perfect ease A solid mastery of easing is what separates the top-notch animators from the hacks. Use this tool to play around and understand how various eases "feel". Notice that you can click the underlined words in the code sample at the bottom to make changes. Some eases have special configuration options that open up a world of possibilities. If you need more specifics, head over to the docs. Quick Video Tour of the Ease Visualizer A special thanks to Jamie Barlow who built almost the entire thing. He's one of our all-stars in the forums, lendin
  25. Note: This plugin was removed from GSAP 3. However, you can register this unofficial plugin to get the effect back. Tweens any rotation-related property to another value in a particular direction which can be either clockwise ("_cw" suffix), counter-clockwise ("_ccw" suffix), or in the shortest direction ("_short" suffix) in which case the plugin chooses the direction for you based on the shortest path. For example: //obj.rotation starts at 45 var obj = {rotation:45}; // In GSAP 3 directionalRotation is built in): //tweens to the 270 position in a clockwise direction gsap.to(obj,
×