Leaderboard

Hi @Tech Nomad Welcome to the forum. If you want to use the morphSVG plugin for this, you need to have a start and end target path for each morph. You can take advantage of loops to make your life easier. Here's a basic example with three paths. You'd just add any ease you like for that effect. You can also give each path a unique ID and loop through like this: The morph plugin is a Club GreenSock perk. More info about that here: https://greensock.com/club Hopefully that gets you started. Happy tweening and welcome aboard.

Hi @Tech Nomad, You can only morph one path (shape) into another - not a bunch of paths into whatever. You could combine shapes, paths - see also this post. Happy morphing ... Mikel

Hi, It´s fun ... Happy tweening ... Mikel

You're not dragging anything. Look at what the target is here. It's a div that isn't in the DOM. // Drags a proxy element Draggable.create(document.createElement('div'), { }); Please check the docs for .hitTest(), and read about the static version at the bottom. https://greensock.com/docs/Utilities/Draggable/static.hitTest() So you could do this. if (Draggable.hitTest(knob, "#work3", "5px")) { console.log("hitted!") } Not sure what you're trying to achieve, but this looks like it might be easier to do if you just create a draggable with type: "rotation". That will of course only work if your gauge is a semi-circle. It's kind of hard to tell from your demo.

Hi Layne, Welcome to the GreenSock forums. Please read: https://greensock.com/modifiersPlugin The section Carousel Wrap has a demo that should help.

Hi Shaka, It sounds like you may be referring to a Single Page Application (SPA) Definitely do some google searching on those with GSAP. You may also need some other framework that was designed to handle state changes and such like React / Vue / Angular These 2 threads may help you get started

with those demos, its clear PointC is the one doing the heavy lifting around here

PS I don't think you'd need to morph the weights on the bar unless you plan to distort them a bit. I'd probably group those rectangles and give them a slight rotation and tiny x/y move when the bar bends. Just my two cents worth. Happy tweening.

Yep, as the others have suggested, MorphSVGPlugin should make this very doable. Most other tools like Snap.svg don't handle shapes with different numbers of points in them. And we did a ton of work in MorphSVGPlugin to make sure it delivers an intuitive morph between the two shapes (well, as much as a computer algorithm can realistically do). I've included an example below. Just make sure that you combine things into ONE path. So you'd have one for the "starting" shape, and then another for the "ending" shape, and then just have morphSVG interpolate between them for you. Happy tweening!

You guys are awesome! Thanks!

Thank you for your answer OSUblake. I have resolved the issue. I was using the hitTest in a wrong way.

I've been getting a bunch of people asking me about how to do a smooth page scroll effect, so here it is. Scrolling is just a transform. If you scroll 100px down, the browser will translate the page -100px up. We can do that with GSAP. TweenLite.set(contentToScroll, { y: -window.pageYOffset }); So how do you prevent the browser from scrolling the content? Position your content in a fixed container, and set the height of the body equal to the height of your content. This will allow the page to scroll, but the fixed container won't move. Now animate the y position of your content based on the scroll position of the page.

Thanks! Here's the pen. And a tweet showing how to make fire with a shader. I'd be willing to bet that this could also be done with SVG filters. https://twitter.com/ciaccodavide/status/964407412634472448

Hi @Vinod, The 'CloudLine' is transformed in your SVG data: "translate (0 -3.44)" and you tween y back to the absolute position of '0' which is lower. Carl takes that into account and sets y back to '-3.44'. Alternatively, you can also move the letters relatively on the y-axis using '- = 10' or '+ = 10' To animate the letters of 'CloudLine', it is helpful if they have the same class name: e.g. 'letter02' And: Your SVG has multiple IDs with the same name. Info ID vs Class ... A wave can be executed with two tweens staggerTo. The last parameter in the second staggerTo positions it, starts it offset to the first: try numbers between 0.2 and 0.3 Happy tweening ... Mikel

Hi @PinkMeNow, What is your reason to use <symbol> here? Information about <symbol> . You can name this object with the id = "dot" ... Attention: You use the same id 'smalldot' for several objects. Use 'smalldot' as class! More info Happy tweening ... Mikel

Hi, Here is a live sample of the React component using React Router: https://stackblitz.com/edit/gsap-bootsrap-slide-sidebar I'm going to start creating a re-usable component, but due to other things I'm working on, it might take a while to get it done, but for now that shouldn't be too hard to use. I'll try to set up a public repository with the code and the styles so this can be added to Create React App and it can be customized as needed. Happy Tweening!!!

Thanks ? I started out learning how to make games instead of websites, and I think that has helped the most. Game development takes user interaction, animation, and performance to a whole other level. I've learned a lot from Keith Peters with his Coding Math videos and HTML5 Animation with JavaScript book. https://www.youtube.com/user/codingmath http://lamberta.github.io/html5-animation/ And from Daniel Shiffman with his Coding Train videos and Nature of Code book. The Nature of Code uses the Processing language, but it's pretty easy to understand and convert to JavaScript. https://thecodingtrain.com/ https://www.youtube.com/user/shiffman https://natureofcode.com/ I would also recommend making a bunch of pointless things. It might like sound like a waste of time, but that's where most of my skills come from. I really like the point Steve Gardner makes in this video about making pointless things. If his mission was to create pop.svg before he made all the pointless things, he couldn't do it. It's the journey of making pointless things that got him to pop.svg. That got me thinking about all the pointless things I've made on CodePen. I've never checked before, but I sure do have a lot. I couldn't find a way to get the number of pens I've made, but 116 is the last page, and there are 25 pens on every page, so around 2900 pens. If I only had 50 pens, I would probably be pretty lame, worrying about stupid stuff like "which framework should I use, and does it have hooks?" So that's the journey of what got me to where I'm at, making games and pointless things.

I don't think that humans-machines site is a single-page application (SPA). You can usually tell by the url in the address bar. If it was a SPA, you would see the url change. And not to a hash link like #foo. However, sometimes you'll see a hash in the url for a SPA, but it will have a slash in it like #/foo. The main reason I started using GSAP was to animate SPAs. They open up a whole new range of possibilities when it comes to animations. And it's not just page transitions that are fun to animate. Most frameworks will allow you to create custom elements with their own unique behavior! I will caution you that there is a steep learning curve to building a SPA. There's usually only one page, so managing everything can become quite complex, and your code might have to do stuff that is typically done by a server. There are a lot of concepts that may seem very foreign if you've only done jQuery types of things. When it comes to building a SPA, I like using Angular. Some other ones include Aurelia, Polymer, Vue, and jQuery smoothState. I know that React is really popular right now, but I don't know if I can recommend using that with GSAP as I hear a lot of mixed things. There's also Angular 2, which is a complete rewrite of Angular 1, so I don't if I can recommend using that as it's too new. One thing I really like about Angular is how you can create animations. I know that other frameworks have adopted this technique, so it's no longer unique to Angular, but here's how it works. You target an animation based on a CSS class name and an event/state. So for a page transition, you would probably do most of your animations during an enter or leave event. Enter is when an element is being added to the DOM, and leave is when an element is being removed from the DOM. Here's a really simple example of an enter and leave animation. http://codepen.io/osublake/pen/5d9d6fe688766b469f5d4db88ef069b2?editors=0010 You always to have call done to let Angular know when the animation is finished. This is particularly important for a leave animation because that is when Angular will remove the element from the DOM. I don't have a lot of demos that do routing, but here's a pretty simple one. A page is an element, so the animations work the same. You can see the animation code by clicking on the app.js file on the left. http://plnkr.co/edit/gDtuKf?p=preview