Jump to content
GreenSock

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

Search the Community

Showing results for tags 'attrplugin'.

  • 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

Found 11 results

  1. When it comes to animation, SVG and GSAP go together like peanut butter and jelly. Chocolate and strawberries. Bacon and...anything. SVG offers the sweet taste of tiny file size plus excellent browser support and the ability to scale graphics infinitely without degradation. They're perfect for building a rich, responsive UI (which includes animation, of course). However, just because every major browser offers excellent support for displaying SVG graphics doesn't mean that animating them is easy or consistent. Each browser has its own quirks and implementations of the SVG spec, causing qu
  2. New DirectionalRotationPlugin Have you ever tweened rotation to a particular value but wished that you could control which direction it traveled (clockwise or counter-clockwise)? For example, if the current rotation is 170 and you tween to -170, normally that would travel counter-clockwise -340 degrees but what if you prefer rotating 20 degrees clockwise instead? Or maybe you just want it to go in the shortest direction to that new position (20 degrees in this case). This is all possible now with the DirectionalRotationPlugin. Previously, shortRotation was available in CSSPlugin, but
  3. Hi, I'm trying animate SVG path with attrPlugin. I can't find any docs about it. Can I use Attr Plugin to move path exatly x:30? Path is from Adobe XD export. Path like this for exemple: <path id="Path_23" data-name="Path 23" class="myGreen" d="M601.019,474.723q-6.417,0-7.933-5.526l-25.239-86.07q-2.408-8.553-11.319-8.555h-2.854a2.541,2.541,0,0,0-2.494,3.21l27.111,92.925q4.454,15.87,22.728,15.87c.158,0,.3-.02.452-.025V474.667c-.163,0-.287.055-.452.055" transform="translate(-3723.339 3675.66)"/> this dosen't work:
  4. Hey all, Got a bit of a quandary going here. So what I'd like to be able to do is to move the points of a polygon contained within a mask a variable amount (in this demo, 400 pts). A pen can be found here: (FF only) codepen.io/johnblazek/pen/CqEpd I'm using the attrPlugin, and adjusting the x/y coordinates within the point, but I'm getting no luck. Could the fact I'm using this as a mask be messin me up?
  5. Hi gsap people, So I'm a bit at a loss. I did a ton of research to find the best "cross compatible" way to reveal a background image on scroll. Basically it works as intended on chrome in the codepen, a more clear example is above the fold to scroll on https://bell.works/work but you can for sure see it in the codepen. Just some notes - TLDR maybe using svg injector to load the svg circles except for the clippath SVG mask which is inline i'm using objectBoundingBox for the clipPathUnits, otherwise the size of the circle on load less easily controlled, and
  6. Hi, If the attribute is multi parted like a 3d coordinate, how can the attribute plugin animate between the multiple numbers (x y z) -> (x y z) ? My object has the following markup: <object id="object_A" rotation="0 0 0"></object> How can i use the attribute plugin or another method to tween the coordinates? {attr:{rotation: "0" }}, { attr:{rotation: " 80" } works but only effects the Z coordinate. I was hoping that it was possible without access to the individual coordinates such as 'rotationX' or 'rotation-x' My try fails silently: var objectA = $
  7. Hi All! Having a helluva time trying to animate some paths in a defs tag to reveal other svg paths. Basic setup is, have a svg path, and then have some strokes that will reveal it when animated. It essentially looks like this ( abstracted ): <!-- In HTML --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 516.8245 197.65855"> <defs> <clipPath id="mask1"> <path d="....." fill="none" stroke="#000000" stroke-linejoin="round" stroke-width="13"/> </clipPath> <clipPath id="mask2"> <path d="....." fill="none" strok
  8. hey i have noticed that some svg specific attributes will be tweened without using the AttrPlugin and {attr: {}} syntax, and some will. is this a feature that is currently in works or is there a reason that only some but not all of those attributes work that way? thank you.
  9. I'm trying to animate the x and y of a nested SVG and am getting the error: Failed to execute 'setAttribute' on 'Element': 2 arguments required, but only 1 present. The codepen uses the min version so can't debug this. What am I missing? http://codepen.io/swampthang/pen/oLZEOK/ Related post: http://greensock.com/forums/topic/14620-tweenmaxset-drawsvg0-in-nodejs-not-working/ regarding the above related post - I'm not going to have a lot of control over the SVGs that will be dropped in to the editor except that I should be able to strip some attributes out.
  10. You can see at line 26 in my JS that I am animating the svg text for whichever circle is hovered over. My only problem is this. Each circle is at different positions, so I need the text to animate by adding a certain number of px to it's current position. Something similar to a varible addition (x += 10;). Is this possible to do?
  11. Hi, I wanted to start a discussion for feedback and thoughts on the best ways to do some masking animation. I've seen the really good one with the green grass and the star shape, but it doesn't work in Firefox. I did find a stackoverflow topic where the author found the Attr Plugin worked with changing <rect> properties! I've got a couple examples up on Codepen and wondered if anyone else has thoughts, examples or work arounds for something we do in Flash so easlily. I'm looking to try and mask an image and reveal it from the center out. clipPath, clip-path and svg are new subje
×