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
  • 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. Hi everyone, I'm trying to implement this effect from this website https://isolation.is/. The grid moves by itself and the animation repeat itself as the items always go back to their starting position. Actually it's not only that, once an item goes past a certain point, the element is taken and positioned at the end of the div (so just append in js I guess). First of all I need to make the grid, in the website though there is no row (as in no parent div for the items) so I have a bit of trouble understanding how it's done. I guess I would have to use gsap.set on all my elements but how to calculate the space and offset needed and then the repeat ? I will post a codepen later as I started my project directly in local. Thank you
  2. Hello, I would like to know if we can create a retro game using GSAP? Is it really possible for beginners to create their own basic game using GSAP? Even without physics in the game just to control the character only. Or even control a snake in the snake game. Anyone tried to create a game using GSAP? Can you please share it?
  3. Hi, I have an infinite animation I want to do (think of rainfall). After it reaches the halfway mark I want to randomly pick between green and red to change the background color, and then when it loops back to the top, it goes back to the original grey color. I already have this going which simulates the infinite "rainfall". I just can't figure out how to change the bg color of the circle at the halfway mark gsap.to(droplet, { duration: duration, y: 620, delay: delay, repeat: -1, modifiers: { y: gsap.utils.unitize(x => parseFloat(x) % 620) //force x value to be between 0 and 500 using modulus }, ease: "none" }); https://codepen.io/felipejorge7/pen/gOxYbOj This is the desired effect:
  4. Hello every one , i found so trouble in use scroll trigger with react three fiber , so can any one help me ? or i have to learn some thing befor ?? i saw an example but never see what i need to do thank's
  5. Hello, I'm sorry if my question is easy, I'm a newbie to this library. I need to implement an SVG character with animation, the character has an image inside and it's not simply a text so I didn't go for TextPlugin, on the other hand, it should reveal the character from one start point to an end point, it's like scrubbing but since my SVG file has one "path" I think it's not possible. So I tried to implement it via timeline with an effect that may help me to develop what I want, but still, I stuck since it will reveal the whole image at one point and I don't want it. They asked me for some effect like this website https://www.nurturedigital.com/ (if you try scrolling you can see a single character with video in the background, but in my case, it doesn't have video. I will be happy if you can help me to find the best solution for this scenario. I have attached my Codepen and the SVG file. r.svg
  6. 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?
  7. 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.
  8. Hello folk , any one know how we can make like this in gsap https://tympanus.net/codrops/2017/06/28/organic-shape-animations-with-svg-clippath/?
  9. Hello community , how we can apply scroll trigger for img from data base in foreach this is the images div from database <div><img src="{{$app->image_path}}" class="flower" alt="image" ></div> then this is the gsap part , but it fire the trigger for all image in the same time gsap.from(".flower", { rotateX: -80, ease: "expo.out", transformOrigin: "50% 100%", scrollTrigger: { trigger: '.flower', pin: true, start: 'top top', end: 'top center', scrub: 1, } });
  10. Hello , i hope some one can help me , how i can do like this effect in gsap , not latterly same , but i want to open laptop win scroll , is there a way with gsap ? thank you in advance reference :https://www.apple.com/macbook-pro-13/ https://postimg.cc/ftRJTW5M
  11. Hi can anyone please help me find what is wrong with this animation, it works very well in chrome and IE but very slow and jerky n firefox. thanks Jas
  12. BFreakout

    Fill a bottle

    Hello Community, I am currently working on an open source community project. It is a game (www.rxjs-fruits.com) - Here fruit is supposed to fall into a funnel and the liquid is to be poured into a bottle. I have now got the SVG graphic for a bottle from a designer. Somehow I just line up too stupid to have the bottle filled. Does anyone have any idea how I can best solve this? Maybe also how I can drop the fruit more beautifully off the assembly line? As a non-designer, I make it really difficult here. bottle.svg
  13. Good day, I am trying to figure out a way to have the animation run individually by the same class. I read the page about the common mistake on the loop but still couldn't figure it out. I know Im supposed to use the array but code did not run. can someone help me please?
  14. GreenSock

    ScrollTrigger

    Scroll-driven animations re-invented Animate anything on scroll DOM, CSS, SVG, WebGL, Canvas, whatever. Toggle playback state or scrub through animations Entering or leaving a ScrollTrigger area can make an animation play, pause, resume, reverse, restart, or complete...or you can make the scrollbar can act like a scrubber! Pin elements in place Make an element appear immune to scroll changes while the ScrollTrigger is active. This is surprisingly useful for creating slick effects and keeping your animation in view during the scroll. Insane levels of flexibility ScrollTrigger is a control freak's dream when it comes to choreographing animations, but its rich callback system also lets you accomplish things totally unrelated to animation. Directionally smart ScrollTrigger supports vertical and horizontal scrolling, and lets you check if the last scroll movement was forward or backward, and even tracks velocity! Automatic resizing ScrollTrigger elegantly adjusts to viewport size changes. You can even use function-based start/end values to run custom logic or tap into fancy responsive CSS changes. Maximum performance ScrollTrigger uses all kinds of techniques to maximize performance like throttling updates, pre-calculating intersection points to minimize effort during scroll, leveraging transforms, layerizing elements to utilize the GPU, etc. Integrated with GSAP ScrollTrigger is built on GSAP, the battle-tested standard for JavaScript animation that's used on over 10,000,000 sites worldwide including most award-winning ones. Get started with ScrollTrigger Download Documentation Examples Featured ScrollTrigger demos View all demos
  15. Hi guys, I'm having a problem with a Draggable plugin, or maybe it is my code error. Anyhow, the dragging animation works perfectly on desktop/laptop devices, but when you test it on the mobile device and try to move around fast by diagonal up and down, you can notice that some images are laggy. I tried everything I knew it might help, but it always gets me on mobile devices. Surely, someone of you guys maybe had some similar problem, or can give me the direction on how I can optimize this animation. Thanks in advance!
  16. GreenSock

    MorphSVGPlugin

    MorphSVGPlugin morphs SVG paths by animating the data inside the "d" attribute. The video explains more (but uses the GSAP 2 formatting): It has never been easier to morph between SVG shapes. First, let's cover what this new plugin can do: Morph <path> data even if the number (and type) of points is completely different between the start and end shapes! Most other SVG shape morphing tools require that the number of points matches. Morph a <polyline> or <polygon> to a different set of points There's a utility function, MorphSVGPlugin.convertToPath() that can convert primitive shapes like <circle>, <rect>, <ellipse>, <polygon>, <polyline>, and <line> directly into the equivalent <path> that looks identical to the original and is swapped right into the DOM. Draw the resulting shape to <canvas> (via a render function or set a MorphSVGPlugin.defaultRender) Use either linear interpolation (the default) or a newer "rotational" type to get more natural looking morphs Optionally define a "shapeIndex" that controls how the points get mapped. This affects what the inbetween state looks like during animation. Instead of passing in raw path data as text, you can simply feed in selector text or an element and the plugin will grab the data it needs from there, making workflow easier. How does it work? MorphSVGPlugin does a ton of heavy lifting so that you don't have to. You can morph a circle into a hippo with a single line of code: gsap.to("#circle", {duration: 1, morphSVG:"#hippo"}); API MorphSVGPlugin needs to know what shape to morph to (and optionally which shapeIndex to use). When only specifying a shape, MorphSVGPlugin can take a wide range of values. Selector string gsap.to("#circle", {morphSVG:"#hippo", duration: 1}); An SVG element var endShape = document.getElementById("hippo"); gsap.to("#circle", {morphSVG: endShape, duration: 1}); Points for <polyline> or <polygon> elements: gsap.to(“#polygon”, {morphSVG:"240,220 240,70 70,70 70,220", duration: 2}); Strings for <path> elements gsap.to(“#path”, {morphSVG:"M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10", duration: 2}); *Note: if the shape you pass in is a <rect>, <circle>, <ellipse> (or similar), MorphSVGPlugin will internally create path data from those shapes. shapeIndex The shapeIndex property allows you to adjust how the points in the start shape are mapped. In order to prevent points from drifting wildly during the animation MorphSVGPlugin needs to find a point in the start path that is in close proximity to the first point in the end path. Once that point is found it will map the next point in the start path to the second point in the end path (and so on and so on). Due to the complexity of vector art there will be times that you may want to change which point in the start path gets mapped to the first point in the end path. This is where shapeIndex comes in. In order to specify the shapeIndex you need to use an object {} with shape and shapeIndex properties. The following code will map the third point in the square to the first point in the star. gsap.to("#square", {morphSVG: {shape: "#star", shapeIndex: 3, duration: 2}}); findShapeIndex() utility Experimenting with shapeIndex can be a bit of a guessing game. To make things easier we have created a stand-alone utility function called findShapeIndex(). This function provides an interactive user interface to help you visualize where the start point is, change it and preview the animation. You can load findShapeIndex() from: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js Once its loaded you simply tell it which shapes to use. findShapeIndex("#square", "#star"); Or pass in raw data: findShapeIndex("#square", "M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10"); The best way to get started is to drop your SVG into the pen above and alter the IDs to match your svg. Be sure to watch the video above which clearly illustrates how shapeIndex and findShapeIndex() work. Additional Notes shapeIndex only works on closed paths. if you supply a negative shapeIndex the start path will be completely reversed (which can be quite useful). Converting SVG shapes to paths Technically it’s only feasible to morph <path> elements or <polyline>/<polygon> elements, but what if you want to morph a <circle> or <rect> or <ellipse> or <line>? No problem - just tap into the utility method and have the plugin do the conversion for you: MorphSVGPlugin.convertToPath("#elementID"); You can pass in an element or selector text, so you could also have it convert ALL of those elements with one line: MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline"); This literally swaps in a for each one directly in the DOM, and it should look absolutely identical. It’ll keep the attributes, like the “id” attribute. So after the conversion, you should be able to target the elements pretty easily, just as you would before. <!-- An svg Like this: --> <rect id="endShape" width="100" height="100" fill="red"/> <!-- becomes --> <path id="endShape" fill="red" d="M100,0 v100 h-100 v-100 h100z"></path> Rotational Morphs? Canvas? Documentation View the official docs here for a full breakdown of the API. To learn how to include MorphSVGPlugin into your project, see the GSAP install docs. Demos MorphSVG Showcase MorphSVG How-To Demos Get your hands on MorphSVGPlugin MorphSVGPlugin is a bonus plugin for Club GreenSock members ("Shockingly Green" and "Business Green" levels). It's our way of showing our gratitude to those who are fueling innovation at GreenSock. To download MorphSVGPlugin, just log into your account dashboard and grab the latest version of GSAP. Try MorphSVGPlugin for free on CodePen! There's a special [fully-functional] version of MorphSVGPlugin that we link to in our demos in our MorphSVGPlugin Collection on CodePen, so feel free to fork any of them, add your own SVG graphics, and take MorphSVGPlugin for a spin. CodePen is a fantastic way to experiment. We highly recommend it. Note: the special version of the plugin will only work on the CodePen domain. To find out more about the many benefits of being a Club GreenSock member swing on by the club page and be sure to check out the other premium plugins.
  17. Hi! I have seen many tutorials showing tween animation on objects. However, I want to know if it's possible to animate cells of a spritesheet too using GSAP ? Like how it's done in other frameworks. I am doubtful about this, since spritesheet are probably canvas-only feature. So, if not, is their any alternative to animate images in sequence through GSAP ?
  18. HI Guys, I have created 2 boxes(large & small).. And i want to animate those boxes differently in different screen sizes. Here in code pen u can see a demo. Its for the large screen device. Here the small box is showing after the first box appears & then sliding to left. But i want to change the animation for medium or small screens. Like first the large box will appear like it do for large screens and then the small box will appear after a few seconds & then instead of sliding left it will disappear after showing a few seconds. I used matchMedia for making changes. But somehow im unable to get the result i want. Im so confused. I dont know what to do. Can anyone tell me whats the problem in my code.
  19. I created a timeline animation which runs on click event. Animations are working smoothly only after few refresh in most of the browsers. Below is my function with timeline.. function exploreTimeline() { gsap.timeline() . to("body", { position: "static", overflow: "auto" }) . to(".intro-content", { duration: 0.3, autoAlpha: 0.01, marginLeft: 50, ease: "power1" }, 0) . to(".intro-content", { duration: 0.8, height: 0, marginBottom: 0, ease: "power2.in" }, 0) . to(".intro-section", { background: "none" }, 0) . to(".globe", { filter: "blur(5px)" }, 0) . to(".magical-slider-container", { duration: 0.8, bottom: "5%", ease: "none", onComplete: () => { ScrollTrigger.refresh(); } }, 0) }
  20. Hi, GSAP is awesome! I have made an animated 'P' but mainly using SVG <animate> so far I using the SVG to animate strokedash-offset, dash-opacity and fill. I'm aware that I should probably use Draw for the stroke stuff but I can't afford it, I've been out of work for 10 years+ and recently I've decided to become a webdev so I've been designing my portfolio so money is tight. I was wondering how would I animate these 3 attributes as I have tried using .to() and putting {strokeOpacity: 0} as it is set to 100% initaly but this does not work. How come? I have also had the same problem with strokeDashOffset and Fill. Hoe can I animate these properties with GSap like I have with SVG below? https://stackblitz.com/edit/paulscv-2qssl8?file=src%2Fbg-components%2FletterP.js Ultimatly my goale is to animates these things with scrollMagic. But for now it would b e nice just to animate them. Is this possible? Thanks
  21. Hello guys, I have a SVG dash polyline in my project. The query is that when I animate that line it becomes solid instead of dash line. I know that I can achieve this using 'DrawSVGPlugin' but I want to animate using TweenMax or any other free plugin your help is highly appreciated in this regard. code: ************HTML************* <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" id="hero-svg"> <polyline id="polyline" fill="none" stroke="#9a201c" stroke-width="2" stroke-dasharray="10,10" class="polyline" points="100,100 300,150 300,500"> </svg> ************Scroll Magic************* var controller = new ScrollMagic.Controller(); function pathPrepare ($el) { var lineLength = $el[0].getTotalLength(); $el.css("stroke-dasharray", 100); $el.css("stroke-dashoffset", 100); } var companyLine = '#polyline'; pathPrepare($(companyLine)); var s5Tween = new TimelineMax(); s5Tween.to($(companyLine), 1, {strokeDashoffset: 0,ease:Linear.easeNone}) var scene5 = new ScrollMagic.Scene({ triggerElement: "#polyline" }) .setTween(s5Tween) .addIndicators() .addTo(controller); }
  22. I am looking for examples of controlling a canvas animation with ScrollTrigger. The documentation suggests this is possible, but not sure where to start. I am creating banner ads with Adobe Animate and would like to use ScrollTrigger for presentation effects on my website. I have a video looping on my home page and would like to use ScrollTrigger to control the video. The video is currently streaming from Vimeo but I can make it in Animate as a canvas animation similar to the banners. I use GSAP from inside Adobe Animate for the superior easing effects and more precise controls. https://roguemotion.graphics
  23. Hello there, First of all, thank you GSAP team for creating such a great library and publishing it for free - fantastic work. Now, the question: I have this idea that I'd like to implement, a page with several full-viewport-height panels. Each of the panels include a couple of animated elements that activate once a certain scroll distance is reached (codepen provided). The animation is built in such a way that its frames could all be (theoretically) placed on a single timeline and animate smoothly from first to last, and backwards as well (each panel fades out at the end of its 'life', so - again, theoretically - no overlapping panels). Slightly similar to fullPage.js functionality. I've built a simple draft of what I want, but have a few issues that I don't know how to solve: 1. Why is it that one of the headers (second frame, purple-ish background) called 'XXX Problem' doesn't fade out nicely like the rest of them, but vanishes right away when moving between panel 2 and panel 3, and when you move back it doesn't appear at all? 2. On panel 3, why do the 3 boxes top and bottom parts start from a certain non-zero height instead of 0, like the 3 boxes on panel 2? 3. If I move slowly between the panels and wait for each animation to finish, it works as intended. However, when I scroll quickly, or refresh the page and start loading it with a scrollbar away from top, some elements can remain on screen, making the rest unreadable. Not expecting a full solution here of course, but can I get some tips on how can I get rid of any artifacts that appear when I scroll the page quickly etc? Is there a way of putting all animations on a single timeline and, say, attach more than one scrollTrigger to it? Thanks. M.
  24. 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??
  25. Hi everyone, I am new in here. My employer wants me to create a page which has an animated background exactly like the grid in this web, whose grid is moving like waves. They want to use different grid image but with the same effect. When I check the website, they use GSAP, hence why I am here. I have been reading the documentations, and so far haven't found any method to create such animation. If anyone can help me, that would be highly appreciated.
×