Jump to content
Search Community

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

Found 604 results

  1. Hello, I am using the GSAP platform to build the landing page of our company website. I am still an amateur in GSAP and a noob in animations. This is the first SVG animation I have made from scratch, so I would like recommendations for improvements. 1. I would like to implement a circular wave animation similar to the Codepen below on the datacentres (dots on the globe). On hover/click, a circular wave animation would go out from the point of the event toggling the opacity. I have figured out the function from the codepen. I need some help understanding the function. I am trying to understand how to pass the "from" object passed from mouseevent click on svg paths I have isolated with datacentres variable. ``` $('.c').on('click', function(e) { staggerAnim.eventCallback('onComplete', null); // An approximation that works okay var gridX = Math.floor((e.layerX - (e.layerX / c.width * 2 - 1) * 20 - e.layerX / c.width * 75) / c.width * cw); var gridY = Math.floor((e.layerY - (e.layerY / c.height * 2 - 1) * 75 + 40) / c.height * ch); var i = cw * gridY + gridX; staggerFrom(i); //console.log(gridX, gridY, i); }); ``` https://codepen.io/creativeocean/pen/JjRNgNw 2. The connecting waves need a little glow and a trailing fade to make them look more realistic. I currently have no idea how to implement them. (SVG filters maybe?). 3. I would like the fill to change periodically from an array of colours in the blinkAnime() function. Can we implement it within gsap.to or use gsap.ticker function? Any other recommendations, link to tutorials, ideas are welcome.
  2. Hi everyone! I'm trying to animate x1 and y1 line attributes of an svg with gsap.quickTo by mousemove. But it doesn't work at all. Maybe I'm doing something wrong. Or maybe gsap.quickTo doesn't work correctly with these svg attributes. Anyway, please help me to understand how I can solve this problem. Thanks!
  3. Hey Everyone, i'am trying to Animate a Group inside of an SVG based on if the Path is scrolled past the Point. Currently the Point is getting visible once the Page loads. But it should only appear or disappear if the line has moved past that Point. I've tried to put it into the Timeline but it didn't seem to work. It should be linked to the ScrollTrigger as the Path animation. Thanks in advance for the help!
  4. I've got a svg-file that I placed (due to responsive reasons) this way: <svg width="100%" height="100%" viewBox="0 0 1000 500" preserveAspectRatio="xMaxYMax slice" class="MAIN">My super duper svg</svg> I want to animate this svg with some kind of event to <svg width="100%" height="100%" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMax slice" class="MAIN">My super duper svg</svg> In other words, the position of the svg changes from "xMaxYMax slice" to "xMidYMax slice" (depending on the aspect ratio of the browser). Is there a way to achieve this? Maybe with FLIP?
  5. Hi all, I have been experimenting with MorphSVG and I am trying to make a button where the border morphs to a sort of arrow shaped border when you hover over it. This has been fairly successful but I see that the left side of the SVG morphs a bit and the animation still feels a bit too wavy. How can you approach a problem like this? I am not that experienced with MorphSVG and would love some insight.
  6. 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!
  7. Hello! I am new to using GSAP so I apologise if I follow an incorrect format. I'm currently creating an interaction map that is made out of SVG that uses zoom and pan. I have used multiple solutions (specifically this one) from other topics related to my idea and tried code from CodePen created by other users. At the same time, I am using p5.js which I noticed that this library can be used with. The issue I'm facing is when I try to implement the zoom/pan interaction from one of the examples, it causes an error when I try to interact with the SVG: "Uncaught TypeError: point.matrixTransform is not a function". I was constantly searching for the exact cause until I have removed the "setup()" and "draw()" functions which causes the interaction to work. Nothing else could have interefered as I have created a completely new project that only contained the SVG and the code of the interaction without any of the p5 functions which also worked. I tried to search if other people had a similar issue to mine, but it seems like I'm the first. I am very confused why this happens, does anybody know why? I need both of those functions to do the fundamental things with p5.
  8. Hi all, first time posting here so sorry if I forget to include something, but here we go... I'm trying to animate this SVG between different sections (wrappers) but I can't figure out why my animation keeps restarting from the original position (the top of the body). I'd like to animate the SVG from the previous position. So if you scroll from wrapper 3 to wrapper 2, the SVG animates from wrapper 3 to wrapper 2. I'm feeling like I'm overseeing the obvious solution here, but I can't from the life of me come up with a solution. Any help is appreciated!
  9. 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
  10. 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
  11. 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
  12. 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!
  13. Hello, what can I do to play the animation in the codepen link in reverse?
  14. 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. ?
  15. 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
  16. 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.
  17. 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
  18. 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
  19. 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 ?
  20. 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!
  21. 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
  22. 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.
  23. 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?
  24. 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
  25. 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! ?
×
×
  • Create New...