Search the Community

Showing results for tags 'svg'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 429 results

  1. Hi all, happy to join this forum with my first post! I've been using GSAP for quite some time now (Loving it!), and I also started to integrate his capability along with other cool drawing libraries. In this case, I'm having some hard time figuring out why frame-rate and animation performances decrease drastically on Safari and Firefox (Chrome is buttery smooth) when animating the following SVG shape using a combination of GSAP and two.js (Canvas Rendering). I've tried to change the rendering intent from canvas to SVG (via the two.js API) and animate a standalone SVG with GSAP only. In all scenarios, I'm experiencing the aforementioned issues. Does anyone have some good suggestion? Many thanks in advance!
  2. adimension

    SVG organice shape morph

    Hello I am new to GSAP and wanted to learn how to morph svg shapes with one another while masking an image, I seen a great example of this on codedrops but they are using anime.js where I wanted GSAP as I have already begun to learn an implement things with it. I have tried to change the animejs to gsap with much failings. Could some one please provide an example I can work from like another forum post or tutorial that could relate to what I wanted to achieve or possibly fork the codepen example with some learnings I could take home. Thank you! Adam.
  3. Artanidos

    Perspective on SVG transform

    Hi all I am developing an animation software. To deploy an animation also to the web I wrote a plugin which renders SVG and uses GSAP to animate values. Btw...you greensocks are doing a great job <3 Now I added the possibility to add 3d transformations but I get stuck with the perspective in rotationx/y. Is it possible to have a perspective for SVG at all? The output should look like the screenshot.
  4. Dash_Cool

    Animating SVG groups using jQuery

    I want to know how to add animation to SVG image groups because I tried but it didn't work. Maybe its already a topic, then please guide me to it, because I tried from my side but couldn't find anything related to it. And I am talking about a group which has many groups and elements in it.
  5. peacepostman

    SVG wave animation

    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,
  6. Hi, I'm trying to playing around with the features of GSAP, but I can't figure out how to work with timelines, I'm new to all this, any help would be appreciated. What I'm trying to do in my code- Each time the v-shaped silver svg translates away from its initial position and back, the text changes, to a different one, similarly it happens once more. Now it works well in the first iteration, but once the animation restarts, the timing gets disturbed, I just can't figure out what I'm doing wrong here, hopefully I was able to explain the issue, thanks in advance and hope you guys have a great day!
  7. Hi, My issue is to do with triggering a nested timeline in reverse, using Greensock and ScrollMagic. I realise ScrollMagic is a separate library but the difference in behaviour I am experiencing is to do with creating timelines either inside a function, or directly on a scrollmagic scene, so I hope somebody can possibly help. I have created two codepens that sort-of replicate my issue. Unfortunately my actual issue is client work so I can't show the same code. But I've recreated the crux of the issue. Additionally my actual code has a pinned element rather than these elements being separate, but hopefully this is enough to explain my issue. Expected behaviour: Scroll down the page - section 1 animation staggers out, section 2 animation staggers in. Scroll down again, section 2 animation staggers out, section 3 animation staggers in. Scroll back up the page - section 3 animations staggers out, section 2 animation staggers in. Again, section 2 animation staggers out, section 1 animation staggers in. I have created a function for fadeIn and fadeOut, and I then create another function "section2Anim", "section3Anim" that is a timeline containing both fadeout and fadein, in order for these two to happen at exactly the same time. (It's not visible on my demo because I don't have the element pinned, but on my pinned version, doing them at the same time basically means one set of dots appear to transform into the next set of dots. Problem: So, I found that the smoothest way to do this, which worked super well for me, when scrolling down the page, is method one, creating section2Anim as a function, and then applying it to the scrollmagic scene. This is this bit of my code: var section2Anim = function () { var tl = new TimelineMax(); tl .add(fadeOutAnimation('#section1 svg circle'), 0) .add(fadeInAnimation('#section2 svg circle'), 0); return tl; }; new ScrollMagic.Scene({ triggerElement: '#section2' }) .setTween(section2Anim) .addTo(controller); You can see this working nicely scrolling down the page in my first codepen, however it does not work in reverse when scrolling up : I have found that the only way to make it work in reverse too, is to not use the function and instead directly assign section2Anim to be the new TimelineMax. like this : var section2Anim = new TimelineMax(); section2Anim .add(fadeOutAnimation('#section1 svg circle'), 0) .add(fadeInAnimation('#section2 svg circle'), 0); new ScrollMagic.Scene({ triggerElement: '#section2' }) .setTween(section2Anim) .addTo(controller); You can see this working both forwards and backwards in my second codepen : So why not just use the latter method, you ask? Well my problem is, as soon as I use this latter method instead in my client code, my animation starts not working properly from the outset, it leaves some of the dots behind (the SVG circles), and doesn't fully trigger the animation. It seems to get stuck and lag, even when just scrolling down. After a while of scrolling it may start to work smoothly. What I am confused about is that in my first method, assigning the function, the animation works really smoothly which is what I want! But I just need it to work in reverse... and because this is all fairly new to me and I am not the best at Javascript anyways (more of a CSS gal), I am confused about why one way reverses and the other way doesn't. I should mention I have also tried some other things with the second method, like pausing the timeline, then playing it on enter of the scroll magic scene, sadly it was still laggy. I appreciate my demo does not show the lagginess or leftover dots, because I had to cut them down for the demo, so maybe this seems fine. But I just can't wrap my head around why the first method, assigning the function of "section2Anim" to the scroll magic scene, works so nicely, but doesn't reverse, whilst the second does reverse, but doesn't work nicely in my actual code. Any help at all much appreciated, thanks so much. Panda
  8. Hi, I have researched and tried various things but can't work out if there is a way to translate svg elements from 'absolute' coordinates? i.e. translate a bunch of svg elements all starting from the center, and finishing at their actual position So in the codepen, I would like to tween all the chickens from the black box to their actual positions ( on the black lines ) Currently, I put in the x,y value of the black box to tween from, but the chickens use this as a relative x,y I could work out the correct relative x,y value to tween from, but in the real project there are many elements that may change slightly Am I missing something obvious? Thanks
  9. vektor

    Scrambletext length wrong (svg)

    Hi, I have a small issue with the Scrambletext plugin using the wrong lengths for the text ( in an SVG ) Most of the strings start scrambling with too many characters, it also still happens if I define the 'text' parameter Can't work out why? Is there a workaround to force a specific length? Thought it may be to do with the tspans, but I experimented with removing some and it didn't seem to make a difference 🤔
  10. digableinc

    Animated SVG stroke to reveal an image?

    I've spent the day testing various methods to get an SVG stroke animation to reveal an image but i've come up with nothing. I've used GSAP to animate SVG's as masks, but i've never attempted to do a stroke animation to act as a mask. I've done this millions of times in After Effects, but just can't seem to wrap my head around this - if its even possible. In this basic pen i've placed a random image below an SVG stroke animation. Anyone know if this is even possible?
  11. gntjnn

    SVG transform origin

    Hi, i'm trying to recreate the following hover effect with GSAP: Right now i'm trying to figure out how i set the transform origin correctly. The element that I want to tween is initially translated so the animation starts at the wrong position. Hope someone can explain me how to fix this. Here is my Pen: Thanks
  12. Hi, I just started out working with GASP, taking baby steps. The first thing I wanted to do, was to use ScrollMagic to draw a SVG path (inside a container) as the page is being scrolled through. I heavily relied on this ScrollMagic example when setting this up. This is my current script: // Prepare SVG function pathPrepare_journey($el) { var lineLength_journey = $el[0].getTotalLength(); $el.css("stroke-dasharray", lineLength_journey); $el.css("stroke-dashoffset", lineLength_journey); } var $journey1 = $("path#path1"); var $journey1_2 = $("path#path2"); var $journey1_3 = $("path#path3"); pathPrepare_journey($journey1); pathPrepare_journey($journey1_2); pathPrepare_journey($journey1_3); // Reference to container var container = $("#section1"); var containerHeight = $(container).height(); var vpHeight = $(window).height(); // Init controller var SVGcontroller_journey = new ScrollMagic.Controller(); // Build tween var tween_journey = new TimelineMax().add( TweenMax.to($journey1, 1, { strokeDashoffset: 0, ease: Linear.easeNone }) ); // Build scene var scene = new ScrollMagic.Scene({ triggerElement: container, duration: containerHeight - vpHeight / 2, tweenChanges: true }) .setTween(tween_journey) .addIndicators({ name: "Draw Journey Lines#1", colorTrigger: "brown", colorStart: "brown", colorEnd: "brown", indent: 600 }) .addTo(SVGcontroller_journey); It works perfectly fine, but as you can see, I have three individual paths inside my SVG ($journey1, $journey1_2 & $journey1_3), and the ScrollMagic scene currently only draws one of them, $journey1, because I was only able to add that one to the TimelineMax(). My simple question: How do I add the other paths so they are drawn at the same time as $journey1? I was able to add the other paths, but they are being drawn consecutively: // Build tween var tween_journey = new TimelineMax() .add( TweenMax.to($journey1, 1, { strokeDashoffset: 0, ease: Linear.easeNone }) ) .add( TweenMax.to($journey1_2, 1, { strokeDashoffset: 0, ease: Linear.easeNone }) ); I appreciate any help with this. Thanks.
  13. Hi all, I've been wanting to try out a new hover animation for a button. Basically, I'm wanting a generic SVG to be hidden above the button. Once you hover over it, it should animate down until it covers completely and pauses. When you hover off, it should continue to animate down until it is out of sight. My problem is that when you hover off and it animates out of sight, I can't get it to start over/repeat every time you hover over it. I've tried multiple ways to get it to work and have failed. The pen I added for this topic is the simplest/cleanest version I have. Any help is greatly appreciated!
  14. Hello, I would appreciate help as I cannot find the solution, just a hint or point a topic. I made a simple animation of SVG with mask and filter, the problem is as it is displayed ok with Opera, FF, Chrome, but not IE Edge. I tried to find the problem but had no luck. I also noticed that if change the values in IE console the effect is the same mask with text is misplaced. Thank You for help in advance. Lukasz
  15. Hello everyone! I'm trying to make a responsive website utilising svg animations, however I noticed, that when using drawSVG tweens, the length of a path gets only calculated once, during the initialization of a tween. My question: Is there a way to trigger path length recalculations during the drawSVG tween without stoping/restarting it. Attached to this thread is a codepen illustrating the problem. Top path is what it's supposed to look like (yellow path hitting the red dot on extremes), and lower path shows what I'm getting. Thank you in advance
  16. Hi! Let's say I want to animate an SVG circle element. I can move it around by tweening its center (cx, cy), or its (x, y) coordinates. Is there a difference between these choices, e.g., in performance? I've read that tweening x and y is just sugar for doing a css translation, which is supposed to be GPU accelerated. (Indeed, a "translate" attribute gets added to the circle node.) On the other hand, tweening cx and cy makes it easy to work in absolute coordinates, whereas the coordinate system for x and y is relative to the element being animated (right?)... Matt
  17. Hi, I'm trying to animate the stdDeviation attribute of a svg filter, it's actually working when I inspect the element, it's updating the attribute, but the rendering is either very bad and slow (firefox) or not rendering at all (chrome). Are the browsers struggling to render properly an animated svg filter? the SVG filter (if stdDeviation="0 20" it works fine but if I animate the values it render very pourly) : <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewPort="0 0 500 300"> <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> <feGaussianBlur id="test" in="SourceGraphic" stdDeviation="0 0" /> </filter> </svg> the CSS : p { width: 50%; margin: 0 auto 50px auto; font-size: 35px; font-weight: bold; color: white; filter: url("#blur"); } and JS : let currentPixel = window.pageYOffset; const looper = function(){ const newPixel = window.pageYOffset; const diff = newPixel - currentPixel; const speed = diff * .1; const blur = speed < 0 ? speed * -1 : speed; //console.log(speed); //TweenMax.to($('.item-content'), .5, {skewY: speed + 'deg'}); TweenMax.to("#test", 0, {attr:{stdDeviation:"0 " + blur}}); //TweenMax.to("#test", 0, {attr:{stdDeviation:"0 " + blur * 2}}); currentPixel = newPixel; requestAnimationFrame(looper); } looper() Once again, GSAP seems to do the job properly, but the rendering on the screen is terrible. I might miss something very basic. If anyone has an idea,... Thank you
  18. WilliamDC

    A responsive svg circle animation

    Hello, I'm trying to create a SVG circle with an animation. It work but when I'm resizing the window, the circle animation is not responsive : the animation accelerate or deselerate by the window resizing. If wee decrease the size of the window, the animation does not end correctly. Exemple : http://guillaumeduclos.fr/circle/#/ My code : <svg xmlns="http://www.w3.org/2000/svg"> <circle ref="circle" cx="50%" cy="50%" r="50%" fill="none"/> </svg> svg { overflow: visible; width: 100%; height: 100%; border: 0px solid red; transform: rotate(-90deg); circle { fill: none; stroke: #FFFFFF; stroke-width: 2px; } } TweenMax.from( this.refs.circle, this.state.animDuration, { drawSVG: "0%", ease: Linear.easeNone, repeat: -1, //onRepeat: this.props.changeTeaserBackground.bind(this), callbackScope: this, } ); I don't know if there is any solution to manage the speed animation and create a "responsive" animation ? I did not find methode in the doc for this. Thanks for your help.
  19. craigib

    Morph 2 SVG paths into 1 circle

    Hi everyone, I've been playing around with Greensock the last couple of days and just wondered if it's possible to morph / animate 2 paths into a single path? In the codepen, you'll see I form a square but the way I've done it is with 2 paths. Just purely so I could animate it in the sequence I have. "Up, Right, Diagonal, Right & Up" I couldn't achieve this with a simple square SVG or at least I don't think so. What I want to do next is morph the 2 paths that make a square into a circle is this possible? Hope this makes sense.
  20. dxc

    Animating SVG's fill-opacity

    Instead of animating the opacity, it seems to wait until the tween is over and then instantly jumps to the final opacity. Any thoughts on what I might be doing wrong?
  21. I am trying to set up some concentric circles that are draggable/rotatable, and I'm trying to set it up on <g> tags because there are going to be some smaller SVGs that need to rotate around as if they were attached to the large color bands. I read the pinned SVG gotchas thread, and although it doesn't mention <g> tags, it's clear that it should work because it works here: Some notes about my codesandbox demo: I had some issues trying to use TweenLite by including gsap as a dependency and using a regular import, so I commented out the imports and added CDN links to TweenMax and Draggable in index.html. Clearly Draggable is loaded and works because I also made an extra draggable div just to make sure. The ultimate behavior I am looking to get is that the concentric bands should be rotating infinitely. If a user clicks on one of the bands, the rotation stops and the band becomes draggable. Once the user clicks on a different band, the rotation starts up again. There are two sections of code that are commented out right now, but if you uncomment them you will see the rotation animation/pausing behavior working. The part that's eluding me is the draggability. All the important stuff is happening in the BaseBand.jsx file. Any pointers on how to get draggable rotation working on an SVG <g> tag would be very welcome.
  22. Site Web Service

    SVG animation not working on site

    Hello, Starting to fiddle with Tweenmax, im trying to get a simple animation working on my website. My animation is working properly on codepen, but not on my wordpress website (using svg support plugin). There are no errors in the console. but nothing happens on the website, im left with a still image of my svg. I think it has something to do with the fact that the javascript files are loaded by the parent page in which the svg is embedded (inline). I can't figure out a solution for this problem. Can anyone help ? Thanks an example of the banner on the page can be found here. Thanks
  23. mikel

    ImmediateRender

    Hi, For a recurring animation I wanted to tween a fromTo-Progress and ran into the 'trap' immediateRender. So here's an example: when multiple fromTo () - based tweens are animating the same proprets of the same object. And applied here in a thoroughly funny cartoon for a serious cause: Kind regards Mikel
  24. swpowe

    Fill SVG from the bottom up

    Hello! My first post here and I'm very new to GreenSock and SVGs in general but I'm hoping I can still get some help on this very basic problem. I've done some searching but can't find what I'm looking for. I have several SVG files and I'd like to change the fill color over time but I want to start from a specific point and fill from the bottom to the top rather than just filling the entire shape at once. Any suggestions?
  25. sali and the kat

    External SVG TweenMax.set rotate (on load)

    Hi everyone, Im trying to load an external svg and setting new width, position and rotation with GSAP using TweenMax.set. Is it possible? Done many tests and no succes so i am wondering if its possible to set initial transforms to and external SVG with GSAP. Any help super appreciated. here is the code: var squares= s.select("#squares"); var tl = new TimelineMax(); tl.set(squares,{transformOrigin:"50% 50%", rotation:45, x:200, width:30}); And the SVG <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="squares" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" xml:space="preserve"> <rect id="orange" x="0.018" y="-0.115" style="fill:#E7B142;" width="100" height="100"/> <g id="grupo"> <rect id="red" x="10.018" y="9.885" style="fill:#C7362F;" width="80" height="80"/> <rect id="green" x="25.018" y="24.885" style="fill:#6AA842;" width="50" height="50"/> </g> </svg> Thanks very much in advance!