Jump to content
GreenSock

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

Search the Community

Showing results for tags 'svg'.

  • 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. Hey! I would like the timeline to be completed before it fires again. Now when you hover really quickly it doesn't look good at all. I'm missing something in the structure that I struggle to find out. My first thought was to find the isActive() and then do some if statements. But isActive() is returning false all the time. - How can I finish the timeline before it fires again? - Do someone know why isActive() always returning false? This is probably a rookie mistake, and, this is my first post in a forum (ever!), so let me know if I could explain/structure my post better!
  2. 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
  3. import { observer } from 'mobx-react-lite'; import { useRef, useEffect } from 'react'; import { gsap } from 'gsap'; import Titanium from './components/Titanium_Honeycomb.js'; const HoneycombCard = (() => { const innerRef = useRef(); const animate = () => { var rows = []; for (var i = 0; i < 15; i++) { // We're doing 15 columns var idx = 1 + Math.floor(Math.random() * 24); if (rows.includes(idx)) { continue; } rows.push(idx); var tl = animate_line(idx); tl.repeatDelay(Math.random()); tl.repeat(-1); } }; function animate_line(start) { const q = gsap.utils.selector(innerRef.current); var tl = gsap.timeline(); tl.to( q('#prefix__comb' + start.toString().padStart(3, 0)), { fillOpacity: 0.0, duration: 0.0 }, 0 ); for (let i = start; i <= 456; i += 24) { var id = '#prefix__comb' + i.toString().padStart(3, 0); gsap.set(q(id), { attr: { fill: '#f802b', 'fill-opacity': 0.0 } }); tl.to( q(id), { fillOpacity: 0.5, duration: 0.1, }, '<' ); tl.to( q(id), { fillOpacity: 0.0, duration: 1.0, }, '>' ); } return tl; } useEffect(() => { if ( innerRef && innerRef.current ) { animate(); } }); return ( <Titanium ref={innerRef} className='selected-card' /> ); }); export default HoneycombCard; I am trying to animate a honeycomb image. I was able to access the path, but was not able to get the animation working. This is my code for the animation. prefix__combxxx is the honeycomb ids.
  4. I am trying to animate svg images in React. I am using object tags since I was not able to get Ids from the image using img tag, but this is affecting the caching of the images and is taking time to load. Is there any way I can use image tag and get it to animate or Is there any other way to get it working?
  5. 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
  6. Hey folks! I'm having a problem with SVG transform properties using transform-box: fill-box Is possible to avoid the matrix calculation in the rect ? I created a Codepen example with three rects, the red use only css, the blue use a normal tween and the yellow one is crazy 😂 Thanks! 💚
  7. 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.
  8. 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
  9. i want paper to go to conus but it moves backwards and i cannot understand how to change it, help please
  10. I'm trying to build a slide-out menu in an app that runs within an SVG tag and everything works except the grid snapping. Codepen I've tried using console.log(endValue) where the Codepen says alert() but it doesn't seem to get triggered. I was thinking that maybe snap was a feature inherited by the ThrowPropsPlugin (not using that) but I wasn't sure. The idea is that the menu element (#testE) can slide halfway out of screen OR fully visible.
  11. 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); }
  12. GreenSock

    GSAP 3.7 Released

    GSAP 3.7 is here! Here are some of our favorite bits... Percentage based position parameter options for timelines Better support for SVG elements with Flip plugin. Easily scope animations to your components! New scoped selector - gsap.utils.selector() Optional scope parameter added to gsap.utils.toArray() Percentage based position parameter. The position parameter is small but mighty. It's the key to building sequenced animations with precise control over timings, and now it's even more powerful! This update gives us the ability to position animations using percentage values - either relative to the previous tween or animation, or relative to the duration of the animation being inserted. The percent is based on the totalDuration(), so repeats, yoyos and staggers will be factored in. This is such an exciting one because it allows us to tweak durations without affecting positioning! Say we wanted to overlap a tween by half of it's own duration. Until now we would do a little mental math, divide the duration in half and add it to the position parameter as a relative position. tl.to(..., {duration: 2}, "-=1"); But if we were to change the duration, we would also have to update the position parameter Now, with the addition of percentages, we can do this instead: // overlap by half of the inserted tweens duration, -1s: tl.to(..., {duration: 2}, "-=50%"); Alternately, we can position a tween or timeline in relation to the most recently-added animation. tl.to(".other", {x: 100, duration: 2}); // insert 25% of the way through the most recently added animation. // In this case - 0.5s into the 2s duration. tl.to(".class", {x: 100}, "<25%"); Or at a percentage from the end of the most recently-added animation, like ">-25%". >-25% is equivalent to <75% tl.to(".other", {x: 100, duration: 2}); // insert 25% of the way from the end of the most recently added animation. // In this case - 0.5s from the end of the 2s duration. tl.to(".class", {x: 100}, ">-25%"); As '+=' and '-=' are always based on the inserting animations total duration, we can even use a pointer to reference the starting point of the previous tween, whilst using the inserting tweens duration as the percentage offset. tl.to(".other", {x: 100, duration: 2}); // insert 50% of the inserting tweens duration from the beginning of the most recently added animation. // In this case - 0.5s from the start of the previous tween. tl.to(".class", {x: 100, duration: 1},"<+=50%"); Powerful stuff! If you want to dig in a bit more, here's a video explainer and some demos to play around with. You'll be a positioning pro in no time! Check it out in action in these demos. Interactive Position Parameter Demo Better support for SVG elements with Flip plugin. Flip plugin has been extended with better support for SVG elements. SVG already has a great coordinate system to work within - but we think this could assist transitions in live data-vis or when animating between states in generative SVG. We'd love to see what you do with this so don't forget to share your demos with us! In the meantime, here's a simple example Easily scope your animations Modern front end dev is all about encapsulated components, but scoping animations to each individual component can be tricky. React devs, for example, often find themselves in "ref Hell" creating a ref for each and every element they want to animate. Wouldn't it be nice to just use classes and selector text that's limited to your component instance? gsap.utils.selector() With gsap.utils.selector() you can grab descendant elements from the selected element. It's similar to jQuery.find() This is great for components because you can create a scoped selector for that component's main container element and then use that to select descendants. It's similar to calling .querySelectorAll() on that element – rather than on the document – except with a few added benefits: It returns an Array rather than a NodeList, so you get access to convenient array methods like .filter() and .map(). You can pass a React ref or Angular ElementRef to gsap.utils.selector(). Then when you use the resulting function, it will automatically check for the .current/.nativeElement in case it was re-rendered since creation. // Vanilla let q = gsap.utils.selector(myElement); // or use selector text like ".class" let boxes = q(".box"); // finds only elements with the class "box" that are INSIDE myElement // or plug directly into animations gsap.to(q(".circle"), {x: 100}); // React let el = useRef(); let q = gsap.utils.selector(el); useEffect(() => { // uses el.current.querySelectorAll() internally gsap.to(q(".box"), {x: 100}); }, []); // Angular @Component({ ... }) class MyComponent implements OnInit { constructor(public el: ElementRef) { this.q = gsap.utils.selector(el); } ngOnInit() { // uses this.el.nativeElement.querySelectorAll() internally gsap.to(this.q(".box"), { x: 100 }); } } A common pattern in React is to declare a ref for every element you want to animate, but that can make your code very verbose and hard to read. By using a scoped selector, we only need to use a single ref. Then we can simply select the descendants. gsap.utils.toArray() We've also added an optional, second scope parameter to gsap.utils.toArray() This will find all the descendant elements of myElement with the class of "box": gsap.utils.toArray(".box", myElement) And more... GSAP 3.7 also delivers various bug fixes, so we'd highly recommend installing the latest version today. There are many ways to get GSAP - see the Installation page for all the options (download, NPM, zip, Github, etc.). Resources Full release notes on Github Position parameter article Full documentation Getting started with GSAP Learning resources Community forums Happy tweening!
  13. https://tympanus.net/codrops/2021/05/04/dynamic-css-masks-with-custom-properties-and-gsap/
  14. Hello, I've adapted an existant codepen to a jquery plugin in order to animate a svg into a random wave effect. I managed to use tweenMax in order to smooth the animation but i dont know if i've done that properly or if something can be improved or re-writed in a more clever way. Feel free to copy the jquery plugin if you need it Best regards,
  15. Hi to all, Formula 1 2021 season will soon start so I've thought it would be nice to share my animation. It was for a contest and I still believe it was the best but the client is always right (only when he's not 😀 - remember Steve Jobs?). Undercutting in F1 is going to pit earlier, do some fast laps (with fresh tyres - filling a fuel not an action here) and get in front of the car previously leading. Maybe the text caption for driving fast lap(s) would be good to add (you can see in the code the red car is driving faster after a pit stop). I would love to see the code updated to GSAP 3 if anyone has time to do it - I haven't succeeded in the zeitnot. And for real F1 fans here's the schedule for 2021 (I don't remember but maybe there are all tracks available as vector shapes somewhere on the web): https://www.formula1.com/en/racing/2021.html 🏁
  16. Juc1

    SVG filter value

    Hi all In my pen I have an SVG filter with a value of 90 - can this value be targeted / animated? Thanks...
  17. I have a simple svg with a rect box inside. I want to change the width of this rect in such a way that it changes from the centre of the rect, like a scaleX would work with transform-origin center. Currently, reducing the width contracts it from the right side. I need to change with width in order to maintain fidelity otherwise I'd use scale. Is there a way to get this to work? Would I have to play around with the x attribute? Thanks.
  18. Hi Guys, I am trying to create a seamless "clipMask Text Marquee", with a timeline. The tl is started (and paused) by ScrollTrigger. Basically everything works as desired, but I have trouble with resizing. The height of the text (trigger Element) is changed by a js function. After Resizing the hight, the position of the triggers become wrong. Is there a way to update them? Or is there generell a better apporach? I am not a big expert (as you guessed) and very thankful, for honest “code critique”. Furthermore I wonder, if and how I have to kill the timeline in PJAX-context. By now it works, when I kill the ScrollTrigger (before entering) the Page and call the createMarquee (after entering) again. Is this enough or is the (old and unused) Timeline (created by function) still present somewhere in memory? Sorry for my English and many thanks in advance.
  19. Hey, This is my first post on the forum, loving gsap! I've ran into a little bit of an error. I have an SVG clip-path that I wan't to perform a simple scale animation on when in the viewport but for some reason it does not want to run in safari, I'm fairly new to gsap so don't have much experience troubleshooting SVG animations, so any help would be appreciated, cheers! NOTE: I've not included the scrollTrigger library on the codepen just so you don't have to scroll to play the animation, the bug still stands.
  20. I am trying animate a SVG element where the element's position/pose is held for a duration and then snaps immediately to a new position/pose, and so on and so on. I have a working example using SteppedEase, but it feels a bit hacky - as it requires me to use an undocumented 'true' parameter (mentioned in: https://greensock.com/forums/topic/13388-steppedease-to-step-immediately) and duplicate the relevant SVG element's path data from the inline SVG image - with a slight modification (otherwise the duplicated path seems to be ignored). In the codepen example - the Red square should snap to align with the Green triangle as it passes the little blue squares (at 0s, 1s and 2s). When I tried using just steps(1) - it stepped once, but at 50% of the inter-blue-square duration (1s in this example). Whereas I need it to step once at 100% of that duration. So the overall behaviour would be more akin to using a series of Hold durations.
  21. Hi. I am starting to go mad trying to resolve this, so I thought I would post a question here instead. I am try to implement a rotation such that everything on the page view box (the outermost group -- depicted by the purple outline) rotates about its pre-defined origin point (shown by the cross - located at 50% 50% of view port in this case, but could be anywhere). At present the resultant rotation is relative to the compound contents of the Group (i.e. all the House elements) -- spinning around itself , whereas I need it to be relative to the parent view box -- effectively spinning around a fixed point on the page. So... the outer Group element ('street' in my codepen example) needs to behave like a parent-filler rather than a child-wrapper, with the origin offsets relative to the parents offset and dimensions. Note: The content items can be arbitrary i.e. multiple houses, cars etc. (set by a user), and the content may also exceed the bounds of the purple view box. None of these factors should affect the pre-defined rotation origin of the 'street'. (start) (desired @ 90 deg)
  22. Hi folks! I need help to implement a new timeline from tweens that are building into a loop. (btw, I use as a base this pen https://codepen.io/osublake/pen/ExPMgQq, credits to Blake Bowen) If is use a gsap.exportRoot() into a const, I have control over the timeline (but there isn't apply to use into a component) . So but I use tl.add(tween) into the loop I can't reach the same result . Also I tried with tl.add(tween, 0) but isn't work for me. Surely I'm doing something wrong, but I can't discover what, so if you can help me I will be appreciated. Thanks. 😊
  23. Hello! I want to layout some text on an SVG path and have an animation play in a loop, on hover. On mouse out, the text should go back to its initial state. I used SplitText and the MotionPath plugins in my CodePen and it looks kind of what i want, but i have the following issues: Timeline related: The intended initial layout, is the one you'll see if you comment out addPause (line 44). I thought i'd probably need to change the startTime of the timeline, but that's not working. What am i missing? On mouseout, i'd like to tween the timeline to its initial state (the corrected initial layout), but again not working as expected. Any ideas? SplitText & MotionPath related: Right now the letter & word spacing is off. It's tight to the stagger values. So how can i maintain the default ones? (This animation is intended to work with words of different lengths). Is there a callback i could use onResize that would re-calculate the correct position of the letters? Any help in any of the above would be much appreciated Thanks in advance
  24. Hello everybody. Our team is currently working on one beautiful landing page for our partner. Our goal is to create a stunning website which will attract new clients. Please reach me out and we will discuss the details. The project is not so hard I believe for you guys. With Regards, Aram.
×