Jump to content

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


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hi! I've made an SVG image with several different objects. The interaction would be this: - If you hover an element there would be a small effect on this element. (a scale, rotate and move depending on the mouse position.) - If you hover out the element get back to the original position. Currently, I have a problem with the targeting, the effect animates all the elements in the SVG. ...And some with the mouse position tracking:) How can I solve this? Thanks for the help in advance
  2. Hello good People! I have an issue with (apparently)`transform:rotate()` css in an animation where i use ScrollMagic which uses GSAP 2.x I can't reproduce exactly this on CodePen, yet can't add the 2.x version gsap js. Here is the current dev site: https://legopd22.iwanwilaga.com/ Please check the robot animation on scroll (with orange background) especially on iOS / apple devices. So it breaks on my old iphone6. Other android phone and desktop doing well on any browser i checked. Do you have hints please why this happens? I applied these css but didn't fix it. transform-origin:center!important; transform-box:fill-box!important; Using TweenMax(). and nested timelines function SVG_Vernie_Robot_Anim(){ let ctrl = new ScrollMagic.Controller(); var timeline_robot_inner_elements = new TimelineLite(); var timeline_robot_slide = new TimelineLite(); var timeline_master = new TimelineLite(); var robot = document.querySelector("svg#robot-vernie"); var robot_head = document.querySelector("g#Head_Vernie"); var robot_eyebrow_left = document.querySelector("g#Eyebrow_Left"); var robot_eyebrow_right = document.querySelector("g#Eyebrow_Right"); timeline_robot_slide .add(TweenMax.to(robot, 1, {transform:`translateX(${is_mobile ? 100 : 250}px) translateY(${is_mobile ? 25 : 0}px) rotate(-10deg) scale(1.5)`},0)) .add(TweenMax.to(robot_head, 1, {transform:'rotate(15deg)'},0)) ; timeline_robot_inner_elements .add(TweenMax.to(robot_eyebrow_left, 1, {transform:'rotate(-25deg)'},1)) .add(TweenMax.to(robot_eyebrow_right, 1, {transform:'rotate(25deg)'},1)) ; timeline_master .add(timeline_robot_slide,0) .add(timeline_robot_inner_elements,2) ; new ScrollMagic.Scene({ triggerElement: ".wp-block-getwid-section.szekcio-terkep", duration: 200, //px }) .setTween(timeline_master) .addTo(ctrl); } SVG_Vernie_Robot_Anim(); To me seems the problem is with rotation. Other `translate` properties work ok. Can you reproduce the same issue? Thank you so much! Best, Wiktor
  3. Hello! I want to move the purple block along the path I've draw in the SVG. This is one section of my website which uses gsap all over the page. Rest of the page can be easily selected using the ref but when I use MotionPath, It throws Invalid scope and Target not found error. Here's the codesandbox: https://codesandbox.io/s/gsap-motionpath-react-bkscsf?file=/src/App.js Thank You!
  4. <div class="card"> <div class="face front"> front img </div> <div class="face back"> Bck img </div> </div> How i can change front and back face ? For right now square box are inside the svg. For now it's svg elment <rect id="point" x="270" y="-5" width="30" height="30" fill="beige" /> But we want to use DIV format there. There are any posibility or similar demo. thanks
  5. Hello @GreenSock community, There are two issue i am facing in scrolltrigger animation. 1) In codepen link you can see the full page site. I need on scroll flip animation. <div class="card"> <div class="face front"> QR img </div> <div class="face back"> normal img </div> </div> on scroll first front section visible. After amount of scroll front will change to back face img. After scroll to next section (IDC FEATURES) it's move to back img. Bottom attact img are backface img. 2) Back face images are visible on bottom of section. It's jump to bottom as per screensort. If you scroll to bottom you can see it's jump to bottom. Is there any solution to fix this images movement. After animation section scroll to bottom. thanks !
  6. Hello @all, I want to scroll card animation. When "How it works " section appear card will stop that position and mobile imag change 2 times. After more scroll it's back to next path. All this animation are in perfome in center of screen. For currently codepen demo it's hide on page scroll. Bassiclly two path with middle one stop animation. As GSAP motion svg it's continuously moving. thanks
  7. Hi we are looking for a full time vanilla javascript software engineer for cast.app, a silicon valley company There is $1000 referral if we hire the candidate. Job description is below but here are the highlights - Experienced vanilla Javascript, - 2+ years paid experience - Startup experience is a plus - equity + market salary, remote, 4K monitor + M1 MacBook Pro - DOM manipulation, javascript worker threads, fast synchronized animation of SVG and DOM experience is great to have https://cast.app/javascript-engineer Send resume to dickey at cast.app
  8. hi, i got a few animations linked to a scrolltrigger, which work absolutely fine with every browser. but in safari if the screen is over a certain width the animations sometimes start to flick or just lag. i already tried to just animate them automatically (without scrolltrigger), but it seems like not the scrolltrigger is the problem. i think that svg's require more performance in safari or something like that? so the question is how can i fix my animations, for safari? it also seems like the animation works fine unless u got a 4k or higher screen. thanks in advance!
  9. Hello, what can I do to play the animation in the codepen link in reverse?
  10. Hi all! I'm wondering if you can show me a clue on how to perform the next operation I haven't been able to do. I have a mega svg on which I want to scroll down and show elements of the svg along with other html elements by pinning multiple sections of the large svg. At certain position I want to display an image in background while the svg elements appear in front while scrolling, let's say that the svg will be divided in four sections that will show a few animations using the ScrollTrigger. After some adjustments I've made to the css properties of the svg I've managed to approach a little to what I need but I'm still not sure if I'm going in a correct direction. What I want to achieve is to display text (video, or any other html element) in front and an image in background while scrolling through the large svg by pinnning a section of the svg to display the content, then scroll and pin again to the next section and so on. In my test, basically I have merged an image parallax with an svg pinning animation. Is there any suggestion or better approach you could advise me to do this. Thanks a lot in advance for your appreciated help!
  11. Hi! I was inspired by this Pen: https://codepen.io/GreenSock/pen/rNOBLBV I have a neon tube (SVG with several box shadows for the glow) and I was wondering what would be the best way to animate it on scroll? I know that animating box-shadow is non-performant, so what are my options if I want to have the neon glow and animate the glow from top to bottom of the SVG on scroll? Could I animate the height of the SVG as a way to make it look like the tube is animating down...but I thought it would look more impressive if the tube is there without the glow and the glow animates downwards on scroll. Any assistance much appreciated! P.S. Hoping Cassie responds because she's my SVG animation hero. 😀
  12. Guest

    svg stroke drow

    Hello, i am sorry maybe i ask some basic questions but i try to drow like this svg from center>> i know they a draw svg plugin in gsap , but can i use css only ,?? then i need it to svg cuz it's easy to draw , then i want to make height dynamic right? thanks
  13. I am confused with gsap.to moving to coordinates. I have a game board with 182 tiles and 182 playing tiles. The goal When the user clicks the bag, a random playing tile is selected and is "supposed" to move over the tile on the board. The CodePen example is just testing for column A and B. Note: SVG image was create in Inkscape.
  14. I would like to drawOn all the craziness that is going on in the attached file but I'm not sure it's a wise idea. I am just getting reacquainted with GSAP (love it) so my chops are not what they used to be but they are progressing! So is this a dumb idea or is it just a monumentous undertaking? We're talking about close to 5000chars and every path is named "d" So, am I dumb, or just uneducated 😁 Thanks, Diza
  15. Hi, I have a SVG text and I'd like to animate it as though someone was writing it. I know it'd be easier with paths elements but I have it as tspans instead. I have tried using drawSVG but it seems that only works with paths. Any help is totally appreciated. The SVG code: <g id="Group_80" data-name="Group 80" transform="translate(-649.918 -257.351)"> <g id="Brand" transform="translate(652.062 329.976)"> <text id="Check_me_out_and_see" data-name="Check me out and see" transform="matrix(0.985, -0.174, 0.174, 0.985, 0, 88.908)" stroke="#000" strokeWidth="1" fontSize="65" fontFamily="Satisfy-Regular, Satisfy" > <tspan x="0" y="61" ref={bstext}> Check me{' '} </tspan> <tspan x="0" y="155"> out and{' '} </tspan> <tspan x="0" y="249"> see </tspan> </text> </g> A screenshot: Thanks
  16. i think i have to do something similar like this(Looped "scrolling" section) or this this(the red panel animation) to achieve the background effect. i dont know how to implement though can you guys help? check out this video i am talking about this
  17. Hi there, I just started to work with GSAP and I made my first animated SVG. I developed everything local and now I wanted to integrate it in my WordPress site. The inline SVG has round about 1000 lines and wordpess some how struggles with this much lines. The result is that the svg looks broken and parts of it are missing. So I integrated the svg with <object></object> now it looks proper. I also enqueued all scripts but the animation is just not starting. In the console I can't see any errors related to this. Any of you more experienced guys may have a look at my work? I hope you can see what I did wrong on a glance! Here is the link Some background information: I use a caching plugin and a CDN but allready tried it without caching and CDN... no result. Thanks in advance!
  18. 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
  19. Hello GSAP, I've got my SVG animation working in CodePen, here's a rough start: http://codepen.io/atkinson/pen/bVqqBm/ but when I place in a WordPress site I'm getting this error in the console: "Uncaught TypeError: Cannot read property 'length' of undefined". I'm loading TweenMax via enqueue scripts in my functions file, so all is good there. The SVG code is placed inline via visual composer/raw HTML. Is this somehow related to doc ready? The js file begins with: jQuery(document).ready(function ($) { I'm at a loss as to how to fix this... Forgive me as I'm a GSAP newbie! Any ideas? Thanks for your help!
  20. Hi there, I've spent an hour or two looking at the documentation and the forum and I'm excited by what I'm seeing. I'm a designer who would like to develop an efficient workflow for working with Wordpress and Illustrator. in time, I would like to use to use CC Animate. In my ideal world, my workflow would be something like: Develop my SVGs in Illustrator in separate artboards, using a combination of symbols and non symbols Export them using the new export screens feature Import the SVGs onto a server via FTP (not using Wordpress media import feature) Be able to manipulate SVGs using Jquery, GSAP, and CSS I'm pretty good about learning technical processes, but I'm more of a designer than a developer. The SVG gotchas post was helpful but I'm hoping for a less high maintenance revision process. I understand that this workflow is probably not realisitic at this point, but I'm hoping people can give me some ideas on resources I can use to develop something that works. Thanks in advance for your help,
  21. obaidnadeem


    When transforming 3D using perspective for svgs chrome there is always a bug that I face. For example on this web https://threeedy.surge.sh/ when all the elements are translated in 3D, there is a bug in the where it sticks on awkward positions. And this happens only in chrome , on firefox it stays in 3D transformation. Also in my portfolio web: https://obaidnadeem.surge.sh/ in the User Interface section I have done the same thing but getting the same bug in chrome while the firefox runs everything smoothly. Is their solution to this or am I doing something wrong? or the only solution is to wait until chrome team fixes bug from their end and extend support for Scalar Vector Graphics ?
  22. 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!
  23. Guest

    SVG animation for character

    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
  24. 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.
  25. 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?