Leaderboard

It doesn't continue from the wrong value, it does exactly what the code is telling it to do. You see, the first tween you create has no idea of what the second tween is doing so, once the second tween is done playing, the first one continues doing its thing as before. The values calculated in the first tween do not get altered by the second tween. The values on the second tween, however, are influenced by the first one. Refer to my first suggestion as to how to approach what you are trying.

Well Baris, be prepared for a lot of studying if you are going to try and animate stuff inside the <defs> elements - There's all sort of potential bugs there. Another thing, you really should be able to just put a url into your posts without errors. Just try it, yes? The animation is behaving as expected. That is because you are applying a mask to an element with an id of "text1_img" and then moving the masked element. If you want to move the mask and not the masked image, you need to target what's inside your mask. Not the mask itself, mind you.

Hey Jp! You set the bottom to be 100vh, not the top. #pub-anim img{ position: absolute; bottom:100vh; } As far as performance goes, DOM element-wise, that's pretty much it. The only way to get more performance is to move those elements inside a <canvas> and run a ton of those calculations on the GPU. But, if you only going to have a dozen or so cats, you should be ok.

Great approach tweening the stop-color, @PointC! Welcome @shMattyP93! Another way to try would be to tween the offset attr:

@Devon Bortscher I should have pointed out some problems with your demo before re-writing it. 1. As you already might know, you can use stagger tweens to add uniform delay when animating multiple elements. 2. You are using infinite: true, in GSAP if you want animation to repeat infinitely then you need to set repeat property to -1. But also for what you were doing you didn't need to set any repeat values. I decided to make a video tutorial explaining how my demo works. It seems like you have already figured, but in case you want to know more you can watch the following video.

BTW @elegantseagulls I've noticed how much you've been jumping in and participating around here. I think that's fantastic. The forum always benefits from additional ideas and fresh eyes on projects. Keep up the good work.

FreecodeCamp has a ton of material to get you from start to finish, not only on JavaScript but in general web dev plus more.

Nope. It's pretty clear we're not gonna make it to the finish line here. This is what we needed. function onReverseComplete() { toggle = "closed"; } Now you can create and start a new timeline each time a box has reversed. This can be applied to your actual project now. You'd just substitute the image covers for the boxes in the timeline creation function. Here's the final version. I think @Dipscom & I have gone above and beyond with you on this project and it is apparent that additional training and practice is required here. I would strongly encourage you to visit the GSAP learning area and blog. Read through everything and really try to understand it. Practice more with your own small demos and projects. https://greensock.com/learning https://greensock.com/blog/ I'd also recommend some basic JavaScript training. There are loads of online resources for that. Best of luck to you.

Great idea @elegantseagulls Last summer someone asked about filling an SVG from the bottom and the offset is a great way to do that. That is definitely a flexible technique that allows you to fill SVG objects at any angle without using a mask or clip path.

Hi @shMattyP93 Welcome to the forum. This is an answer from another thread, but it should show you the basic technique of one way to do it.. You could also do it with a mask or clip-path. Happy tweening.

An easy way to keep things random is to create a new animation when the current one finishes.

Yep, I think @PointC is exactly right. And to be clear, the file you're using is written as an ES Module. Most modern browsers accommodate those, but you have to add type="module" to the <script> tag. It's probably easiest to just point your <script> tag's src to one of the minified files instead, which aren't ES modules (they're in plain ES5 format). Thanks for being a Shockingly Green member! Happy tweening!

Hi @bennyboy1978 Sounds like you're trying to use the version from the 'bonus-files-for-npm-users' folder. You'll want to use the version in either the 'uncompressed' or 'minified' folders. It's in the 'utils' folder. Does that fix things for you? Happy tweening.

Yup.

You can get total duration by calling timeline.totalDuration(). Then set totalDuration of your another animation to same as totalDuration of your timeline. If your timeline has other animations as well, then you can add your slides related timeline to another timeline first and get it's total duration then add it to your main timeline.

Yeah, I got it. And they can solve some pretty interesting problems inside frameworks. Check out this post. Somebody used them inside Vue to track markers inside a WebGL library. I don't know if that could be done any other way. https://dev.to/bennypowers/bonus-solving-problems-in-vue-with-web-components-2582 Opinionated software can make development a lot easier. I really like React's approach to creating components. Tic Tac Toe in React: https://codepen.io/gaearon/pen/gWWZgR Tic Tac Toe in Web Compoents: https://codepen.io/osublake/pen/6e4b5f066b6a415a81e0d75f46d1daf8 The code is nearly identical, except one is not an abstraction, nor does it need a virtual DOM to do updates. LitElement is an HTMLElement with some helper utilities. Keep an eye out on this repo. It will contain a lot of web components animated with GSAP. https://github.com/material-components/material-components-motion-experimental

Eh? Sorry but you seem to be contradicting yourself here. Your initial question and the title of this thread is about moving an element on Y, not about SVG. I hope you can understand that we have limited resources here and thus, must keep this forums GSAP focused or we will be overwhelmed. We can't offer troubleshooting general SVG, JavaScript issues. We do, of course, help out as much as we can and share as much knowledge as we have. In your case you have nearly 100 lines of HTML code, close to 500 lines of CSS and over 200 lines of JavaScript. That's definitely not a reduced case example. Places like StackOverflow is where you will get help with more generic questions as to why your SVG is not displaying.

While I agree the 'flag' option is not the 100% most wonderful way to go about it, there's the issue that if you have an infinite tween inside a timeline, the playhead will never go past that tween so, there isn't really a way to have the timeline call another method beyond said tween.

@OSUblake nice! Thanks so much for figuring this out and explaining what I did wrong. This makes complete sense. I actually used this pattern in other components w the observer as well, but got away with it because I would unsubscribe after firing once ? Also the example you shared looks great!

Third problem: I don't see the link to your CodePen Please paste the URL in your reply. Thanks!

Hi and welcome to the GreenSock forums. The issue is that you are using a timeline which is active. When you hover the the circle it turns into an elephant. The timeline starts and the it keeps running. Then you move the pointer out of the elephant shape. At that point you're adding another instance to the timeline, 0.1 seconds after the end of the last instance, which is the circle morphing into an elephant, but at that moment the timeline's playhead is passed that point so you don't see the elephant going back to a circle. I would recommend you using a single TweenLite instance and then the play and reverse methods. Also if you want to speed the reverse process, you can use https://greensock.com/docs/TweenLite/timeScale() as well. This code seems to do what you're looking for: var elephant = $("#elephant"); var circle = $("#circle"); var t = TweenLite.to(circle, 1, { morphSVG: "#elephant", paused: true }); function toElephant() { // timescale 1 returns the tween to it's original speed t.timeScale(1).play(); } function toCircle() { // timescale 3 makes the tween 3 times faster t.timeScale(3).reverse(); } $("#circle").hover( function() { toElephant(); }, function() { toCircle(); } ); Happy Tweening!!

I'm not sure I follow the question. It kinda sounds like you may want to pin the image carousel until the line gets to it? But I'm really not sure I understand the desired outcome here. Could you be more specific about the desired behavior and how GSAP plays a role in it? Thanks and happy tweening.

Thank you so much, PointC! You are supreme! I'll check out your stroke-dasharray thread now. Have an excellent day! Best, Blake

Why would the animation open and restart? You want to allow clicks and a new timeline once the active timeline has reversed. We know the toggle variable has to have a certain value in order to make that happen. function reverseComplete() { // one line of code goes right here }

Hi guys, There is always another way. And that is not an alternative truth! Have a nice day ... Mikel

What is the effect that you are after? What do expect to see? You can't move the image without moving the mask, they're glued together. You can move the element you have inside your mask, and that will give you the impression your mask is moving. However, if you want the mask to stay in place and the image moving underneath it, you will have to wrap the image in a <g> element and move the image inside it. <svg width="360" height="233" version="1.2"> <defs> <mask id="maske"> <image width="100%" height="100%" xlink:href="http://motionlove.co.uk/banners/test/text_1Mask.png" /> </mask> </defs> <g mask="url(#maske)"> <image id="text1_img" width="100%" height="100%" xlink:href="http://wemedia.com/wp-content/uploads/2008/12/istock_dandelionlarge.jpg" /> </g> </svg>

If it's not stopping that's not the path you should be going down. You are trying to overcomplicate this. The answer is much simpler and has nothing to do with the actual timeline, it's the concept of state. Your animation has two states, doesn't it? One is open the other is closed. Now, refer back to what PointC has explained and the code that is there as an example. What do you need to write in your onReverseComplete function so that your state changes? What in the doCoolStuff() function prevents the timeline to be created repeatedly?

That was amazing buddy, excel! Thank you very much! :)

json is real simple and easy to learn. Just go to udemy, search for json https://www.udemy.com/courses/search/?src=ukw&amp;q=json

Hey Dave, I've been meaning to check in with you, and what you're working on. Do you think you can make a demo so we can get a better understanding of what's going on? I'm thinking that you'll need 3 separate animations, and/or maybe a media query watcher to create different timelines based on the size. For triggering viewport animations, I find using the Intersection Observer API to be pretty good. There's also a polyfill.

An example of triggering animations with the Intersection Observer API. Notice how the handler only toggles the playback state of an animation. if (entry.isIntersecting) { // play animation } else { // pause animation } Your handler is adding the same animations to an already existing timeline, so it's getting longer and longer every time entry.isIntersecting is true. So maybe something like this. inView(entry) { if (entry.isIntersecting) { if (!this.state.firstInview){ TweenMax.to(this.sun, 4, {opacity: 1}) this.setState({firstInview: true}) } this.tl.play() } else { this.tl.pause(); } } componentDidMount() { TweenMax.set(this.sun, {opacity: 0}); this.tl = new TimelineMax({ yoyo: true, repeat: -1, paused: true }) .to('.sun-flare--1a', 1, { x:50}) .to('.sun-flare--2a', 1, { y:50, onComplete: () => console.log('TL-1+2 completed') }, 0) .to('.sun-flare--3a', 3.5, { y: 150, onComplete: () => console.log('TL-3 completed') }); } And your click handler isn't working because of the parentheses. That will immediately execute the function. // Bad <svg onClick = {this.clickHander()}> // Good <svg onClick = {this.clickHander}>

A GSAP tale: One goofy guy’s odyssey from knowing nothing to knowing just enough to confuse himself. (This is crazy long so feel free to jump to the epic conclusion). Greetings fellow GreenSockers. The end of this week marks the one-year anniversary of my first post on the forum so I thought I’d take the opportunity to share my 12-month story and hopefully encourage others to jump into the conversations around here. Maybe you’ll recognize yourself in some of the things I’ve experienced. My quick history in a nutshell Web design and coding is a second career for me. After 15 years of owning and operating a photography studio and processing lab (back in the film days - yup - I’m old), the digital camera came along and changed that industry, which necessitated a new career for me. I shifted to video production, which led to motion graphics and finally to web design. Our little agency now offers all those services. The web design clients never needed anything fancy so JavaScript took a back seat to HTML & CSS only sites for a number of years. JavaScript & GSAP: false starts and other obligations I first discovered GSAP a few years ago, but only tried it briefly. It looked cool, but with the time obligations of field video work and motion graphics jobs, it wasn’t something I could work into the schedule. Besides that, it was JavaScript – too complicated I thought. I knew JavaScript was the third piece of a good web designer’s skillset along with HTML and CSS, but I always convinced myself that I didn’t have the time and the sites we built didn’t need it. JavaScript Books + Classes = Fail I did make a few attempts at reading some JavaScript books and working through some online tutorials, but it just never ‘stuck’. Maybe the examples were too theoretical and dry or they were the wrong books and classes. I really don’t know, but I abandoned the learning process a number of times. Cut and Paste mentality Why did I really need to learn anyway? You can just Google what you need, cut and paste some code and presto – you’ve got some working JavaScript or jQuery. I only understood a small portion of what I was cutting and pasting, but hey… it worked so the problem was solved. That’s how I operated for quite some time. What’s a loop? What’s an array? What’s an object? Who cares? Wait a minute. This is ridiculous. Last spring, I was remodeling our company website and I had all these grand visions about making things move and behave in certain ways. Googling for code just wasn’t cutting it. I suddenly felt stupid. “This is ridiculous!” I thought. I should be able to learn how to write my own code. Oh yeah, I remembered that GreenSock thing I had looked at a few times and abandoned. That might work. Maybe I could actually learn how to use it this time. I become a forum lurker I started lurking in the shadows of the forum. After reading a lot of posts, I saw people asking many types of questions from simple to crazy complicated (at least to me). Two things I noticed were that every effort was made to find an answer (no matter the difficulty level of the question) and not one post was condescending or snarky. That’s quite rare on the ol’ interwebs, isn’t it? Hmmmm…maybe I’m in the right place. Oh boy… time to ask a question of my own One of the great things about learning GSAP is you’ll also pick up a lot of other JavaScript and/or jQuery along the way. I kept reading and practicing with some simple tweens, but now I had a question. Dare I post? I suppose, like many others, I feared looking like an idiot even though the forum members and moderators seemed quite nice and helpful. I do several dumb things every day so you’d think I’d be used to it by now. Oh well, here goes. My first question had to do with the indexOf() a Draggable snap array. Within 30 minutes, Diaco and Rodrigo had posted great answers and neither one called me stupid! Yay – how cool. I get hooked on GSAP and the forum About that same time, I decided our company should discontinue on-site video production and switch to studio only filming. I got tired of lugging loads of video gear in and out of buildings – it’s quite tiring and as I mentioned earlier – I’m old. This freed up some time and I decided to dedicate that time to learning GSAP and maybe, one day, even helping others. It wasn’t too long and I actually knew the answer to a forum question. I posted some information and wow – a little red indicator lit up on my control panel. Someone liked something I wrote. How fun – I’m hooked. Carl makes direct contact I continued to learn and experiment. I posted a few additional questions of my own, but I tried to answer more than I asked. If someone posted a question for which I had no answer, I tried to look it up in the docs and figure it out. Most of the time I was far too slow and Jack, Carl or one of the mods would already have the answer posted before I was done reading the question, but it was an interesting way to learn. I did sneak in a few good answers, which led to a private message from Carl. He thanked me for participating and helping in the forums. I thought it was pretty cool that a super smart guy like Professor Schooff would take the time to do that for little ol’ me. My decision to dedicate time to the platform and forum was reinforced. http://i.imgur.com/hdaB73Y.jpg Blake and I have a conversation I don’t recall if it was a back and forth in a forum post or a private message conversation, but Blake told me something that, of course is obvious, but it stuck with me and is important for all of us to remember. He mentioned that we all enter this learning process knowing nothing. If someone of Blake’s considerable skill level can be humble enough to remember first starting out in code, there may be hope for me after all. I guess if you think about it, there was a time when the simple concept of a variable was brand new to all of us. We’re not born with these abilities. They’re learned and we’re all at different points on the educational path. Never feel stupid for not knowing something. Moderator Promotion Throughout the last year, I’ve continued to learn and study both GSAP and JavaScript. Some of those books I abandoned in the past even make sense now. I’ve tried to be active in the GS community and answer as many forum questions as possible. If I’ve answered a question of yours, I hope you found it somewhat helpful. I’ve cranked out some fun CodePens and finally started a Twitter account to tweet them out. I am nowhere near an expert with GSAP or JavaScript, but I know so much more than I knew a year ago. Apparently I know enough to be entrusted with a forum promotion to Moderator status. I’m honored to be included on such an amazing team. 12 months down – what’s next? My agency duties are still numerous so I can’t dedicate full time to coding, but it remains something to which I’m committed and thoroughly enjoy. I started this 12-month GSAP journey just wanting the ability to write my own code rather than cutting and pasting the work of others. I’m confident I have achieved that, but I still have days when a simple piece of code just won’t coalesce in my brain and that can be frustrating. I guess we all have those days, right? I make several mistakes every day, but that’s o.k. too. I learn a lot more from my screw-ups than I ever do when it all goes right on the first try. I plan to keep learning and getting better and when I get stuck, I’ll be able to get an answer from this amazing community. I’ll continue to give back to the GS community by answering any questions that are within my abilities to do so. The super mods: Jonathan, Blake, Diaco and Rodrigo Thank you to my fellow moderators. You guys rock and have taught me so much. @Jonathan – if there is a browser bug, quirk or special fix that you are not aware of, I’ve yet to read about it. Your knowledge has helped me fix many pieces of code before they even became a problem. Plus, if I ever have a question of top/left vs. x/y, I know who I’ll ask. @Blake – if I could be half as good at coding as you, I’d be a very happy guy. Your work always teaches and inspires me. I don’t think you’re allowed to ever stop posting on the forum or we may all show up on your doorstep and ask questions. @Diaco – your code is always so concise. I deconstruct some of your pens and am astounded by how much you squeeze out of a few lines. If I made some of your pens from scratch, I’d have 20 variables, 5 loops, 12 tweens and 80 lines of code. You do the same with two variables and 4 lines of code. Amazing stuff. @Rodrigo – when searching the forum, I often land on one of your past posts and learn a lot. Your knowledge is vast and I wish you had more time to post around here. Your ninja skills are incredibly strong. Our superhero leaders @Carl – I’ve participated in several online forums ranging from graphic design to 3D to video production, but the GreenSock forum is the best and a big part of that is you. You not only provide great answers, but you do it in clever ways with just the right amount of humor thrown in here and there. The collection of videos you’ve made is invaluable and should be mandatory viewing for anyone interested in GSAP. I’ve seen you monitoring the forums at all hours of the day and even on weekends. When you get any sleep I’ll never know, but I thank you for your dedication and sharing your knowledge. @Jack – how you had the vision to start GreenSock and write the first version of the animation platform I can only imagine. I’m glad you did because GSAP is such an amazing collection of tools. The friendliness of the community is definitely following your lead. I don’t understand a lot of what you talk about sometimes, but I know enough to be amazed by your brilliance and talent. You call yourself just a guy who geeks out about code, but you’re more than that. You’re a smart and generous innovator who’s created a special brand and place on the web. I think I can safely speak for the community when I say we all appreciate the time and effort you put into helping us make beautiful and high-performance animations. Thank you sir. The epic conclusion. Well… maybe just a regular conclusion. If you didn’t read the whole post, I don’t blame you. It’s ridiculously long and I’m just some guy you don’t know so I’ll wrap it up with this bit of advice. Whether you’re a genius or feel like an idiot, it doesn’t matter. Try to learn one new thing each day and before you know it, a year will have passed and all those little bits will add up to new skills and abilities. If you’ve never posted on the forum, please jump in and participate. The more voices we have around here, the more we all benefit. If you need an answer, please don’t be afraid to ask a question. Believe me, I’m just some goofy guy in front of a computer. If I can learn this stuff, so can you. As I begin my second year in GreenSockLand, I’m looking forward to learning more, seeing everyone’s work and answering as many of your questions as I can. This is an amazing community and I encourage anyone reading this to set up an account and get involved. My best to all of my fellow GreenSockers. See you around the forums. Edit and Update (July 2020): I just made it to five years of hanging around the forum and you can read the continuation of my journey here. motiontricks.com Finally, without further ado, I introduce you to motiontricks.com - Craig (PointC) PS I made a little CodePen to commemorate my one-year forum anniversary. It’s how I felt before and after discovering the power of GSAP. Enjoy.

Hey everyone Another quick SVG tip. Set your stroke dash length to 0 and your linecap to round. That will get you a nice circle border around your path or a string of circles along an open path. For a complete string of circle shapes along the stroke, set the gap equal to the stroke-width. https://codepen.io/PointC/pen/VXMmZV If you set the gap to less than the stroke-width, you can overlap the circles and create a nice scalloped edge. I personally like around 50-70% of the stroke-width. Throw a gradient on for a nice picture frame. https://codepen.io/PointC/pen/bvvddx With some creative layering and masking you can confine the scalloped edge to the inside or outside of you path. https://codepen.io/PointC/pen/YaaqPQ Using two strokes with different stroke-width and gap sizes, you can turn an ordinary ellipse into a cloud. https://codepen.io/PointC/pen/RMMMKv Morphing shapes with a circle border creates some cool results. https://codepen.io/PointC/pen/rddOqd Since these are circles making up the stroke and not actual elements, we can’t draw them on or make them move individually. Or can we…? Using a mask, we can draw them on and animating the gap size can bring them into position in an interesting manner. https://codepen.io/PointC/pen/wmmmmK It has its limits but can produce some fun results. The main thing to remember is set your dash length to 0 and the linecap to round. After that, experiment with stroke-width and gap size. Happy tweening.

You legend! Thanks Craig! I didn't even read "npm" durrr Thanks, that was baffling me for ages!

Sorry, I totally misunderstood how ScrollMagic works. The duration is set by the duration setting in ScrollMagic, that expands the scroll area so that the animations take more time to complete. So this was solved!

Hey Baris, I've edited your post to contain a live link for ease of use. I have also looked at your example pen and must say that is far more than a reduced case - There is a ton of irrelevant code in there for the issue that you are asking. If you can remove the stuff that is not related to your question, it will help a lot as we won't have to wade thru a ton of code to figure out what might be going on. However, I think I can understand what you want to achieve. The way I would tackle it would be having a parent <div> that holds all of your elements that are slowly moving upwards then, I would target the individual child element with the extra 20px jump. That way, you will have your constant movement upwards as well as control to make the children jump up whenever you need.

I've never liked the above 'flag' solution - it's messy and sprawling. I'd like to be able to do something like: let tl = new TimelineMax(); tl.to('#el', 2, {y: 40, repeat: -1, yoyo:true}); //later tl.repeat(0); //this would make it play to the end and stop

I haven't worked with Celtra in years but they used to not support external libraries at all. Celtra is a full adBuilder and deployment system. You would build the whole add inside their system and only work with the components they made available and some vanilla JS. There was some talk of them supporting external libs at some point but I don't know if that ever went anywhere.

As Blake mentions, when creating timelines in React, always use the componentDidMount hook, because that is run only once in the component's lifecycle, thus creating the animation only once and after all the elements have been added to the DOM and the component has been rendered. It seems to work as intended with the changes Blake pointed out: https://stackblitz.com/edit/react-timeline-pause-flow?file=Sun.js Also there is this sample from the GSAP-React guide: https://stackblitz.com/edit/gsap-react-timeline-sequence Happy Tweening!!

Probably a displacement map. Here's a good thread in which @OSUblake has a cool shader example. If you search the forum (or Google) for canvas, Pixi or displacement maps, you'll find some cool stuff. Happy tweening.

Perhaps it would be appropriate to hire an expert to help you out. Or analyze the source code to see what they did? Good luck with the project.

PS Check out my thread on circles along a path using stroke-dasharray. It's easier than creating all those individual circles. Happy tweening.

Hi @Blake The morph plugin wasn't loading and you had a really old version of TweenMax. You'd also want to align the #plane group to the path. var motionPath = MorphSVGPlugin.pathDataToBezier("#dotted-line-path", {align:"#plane"}); Hopefully that helps. Happy tweening.

I re-wrote the demo. I would say avoid assigning class to keep track of active elements, it gets messy and confusing real quick.

Hi @Rezpo, Did you expect this effect? Use x and y values to move the eyes. And: both IDs or set a common class like '.eyes': Happy tweening ... Mikel

GSAP animates stuff. Look at speech recognition. https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API This demo works in Chrome. https://davidwalsh.name/demo/speech-recognition.php

What's your use case? Trying to do that while dragging is really complicated. There is nothing to stop a user from moving their mouse through a "blocked" element. See this demo. It's using a collision detection library with responses, but the dragging is a little wonky because you can move your mouse through blocks, causing your draggable to jump around. That's a demo I quickly modified from this thread. It could be done better, but I don't have the time to rework it.

Interesting approach, but it's pretty easy to do an isometric projection. It's even easier to do a diametric projection. You draw stuff at 26.565 degrees instead of 30 degrees. Why would you use a weird angle like that? Simplicity. Don't think in angles. It's a 2:1 ratio. If a tile is 100 wide, then its height would be 50. That's how isometric computer graphics are usually drawn. https://en.wikipedia.org/wiki/Isometric_computer_graphics You define positions as row and column values in a grid. Getting the projected coordinates is done like so, where x would be the column, and y would be the row. var xCoord = (x - y) * tileWidth / 2; var yCoord = (x + y) * tileHeight / 2;

Haha - I'm busted. A few months ago I was designing something and meant to type 10 in the dash length, but missed the 1 and found the circles by accident. I've been meaning to make some demos and type this up for the GS community ever since then, but kept pushing it to the back burner until now. Thanks for the canvas conversion. I think that will help some people.