Leaderboard

If I may chime in myself... Hi @Doug Dodge, welcome to the forums! Oh Mighty CODEGOD! This heathen knows you know, this one is only trying to enlighten the lost ones that might not be aware, as you are in your infinite knowledge. For other mortals: here's a picture of the old computers NASA used back in the day, not that I claim to be this old... For the youngsters around - I mean, people born when I was 18 are now adults, sheesh... - Here's a little more info: https://crgis.ndc.nasa.gov/historic/Human_Computers Building up on what @Carl said: There are so many ways of achieving the same end result that it's worthless trying to find out the best one. I am aware you said you are pressed for time but still, I would say the best course of action would be for you to focus less on what library to use and get really, really good at the underlying technology. In the case of the web, it's the browsers, HTML, CSS and JavaScript. The browser because that's the environment your app/site is going to be presented and each browser has its quirks. Also understanding the limitations and capabilities of the browser can be a great help. I only recently learnt that the browsers come with basic speech recognition - How amazing is that? There are tons of other things browsers do that you could leverage. Really knowing HTML, CSS and JavaScript is essential if you want to make the most of your site. Don't go down and try to read the spec, it's not great fun. But do focus on the language, not on libraries. Then, as you learn the good, the bad and the ugly of each language, you will understand when and which library/framework to use. Another thing is, JavaScript for better or for worse is the way to manipulate anything inside the browser. With it you can manipulate all data inside your page, be it images, video, audio, the DOM and so on. Then, you can use GSAP to tween any of those values to your heart's content. Once again, welcome. May you have fun learning. And be sure to come back, share your experience and hopefully, in time, start helping others as well.

It's a security issue when inserting JavaScript like that. Don't know how jQuery does it, but if it uses innerHTML, it's not supposed to execute. Or it could be a closing script tag issue. https://stackoverflow.com/questions/610995/cant-append-script-element https://stackoverflow.com/questions/236073/why-split-the-script-tag-when-writing-it-with-document-write/

There's a little heart button at the bottom right of each post... Some of us are suckers for those little trophies and hearts...

Hi Doug, One thing to keep in mind is that GSAP at its core is a property manipulator. It can change numeric properties on objects over time very quickly with extreme accuracy. The properties it can animate can be the color of some text the position of basically anything the background color of an HTML element the border-radius of an HTML element the rotationX of an HTML element the path data of an svg <path> the stroke-width of an svg stroke the position of camera in a 3D scene (three.js) the velocity of wind that is blowing 10,000 flakes of snow the amount of blur in an image the amount of drop-shadow on an image and literally 1000's of other numerical values that may affect how an object appears. I think what you will have to answer for yourself is what rendering and layout toolset you want to invest your time in. GSAP can animate these types of properties on regular HTML elements (and their css properties), SVG elements, and lots of things that happen in HTML <canvas>. If you want to live beyond the restrictions of "web standards" and all the quirks you find with browser and css, you may want to just do everything on HTML5 canvas and use a library like pixi.js Pixi is a super fast canvas rendering library and you can use GSAP to animate pixi objects and filters. Blake does a ton with it, just look through his demos: https://codepen.io/osublake/pens/public/ official pixi demos: http://pixijs.io/examples/#/demos/animatedsprite-demo.js There is also Three.js if you want to do great stuff with GSAP in 3D If you like working with vector art then SVG may be the right choice. Chris Gannon has made a career out of animating SVG with GSAP: https://codepen.io/chrisgannon/ If you want to build modern websites that are responsive and give you full control over layout, you probably want to spend a few weeks learning about CSS grid and Flexbox https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ The reality is there is no "one best solution" and there are a ridiculous amount of options. The good news is that GSAP can pretty much animate anything, its just up to you to figure out which tools give you the best control over the layout your need and type of artwork you will be working with.

Hi @Alexli, Welcome to the forums! Although I do not know for sure, I would suspect it is a case of browser divaness and a reduced case scenario would be the only way to figure it out - or if someone else happens to be doing the same thing as you. You can get data from a firebase in CodePen. If you would be so kind to try to get a simple pen together it would be great. Here's a some pens tagged with firebase in CodePen - maybe you can work it out by looking at some examples: https://codepen.io/tag/firebase/

Seems like an appropriate time to repost this evidence.

@OSUblake show-off. Nicely done. I may have to steal some of that demo.

I’ve seen a few questions recently about getting better morphs so I thought I’d share a little tip that may help my fellow AI users. Whether you’ve created your own vectors or downloaded some stock artwork, the scissors tool is a quick way to get better morphs. You can also completely control the start point of your DrawSVG animations. I have an example using a couple heart shapes. This is just an icon from a collection I downloaded. The designer has the first point in the upper right curve of the heart. That’s probably not the best start point for any type of animations, so that needs to be fixed. Step 1 – Cut that path. Grab your scissors tool (it’s in the fly-out menu under the eraser). Line that up with the anchor point at the bottom point of the heart and cut. You’ll now have two anchors at that location. Step 2 – Select the points at the cut location and then join them together. It’s under the Object --> Path –-> Join (or Ctrl+J shortcut.) That is now the new start point of the path. You can now export the SVG. Here’s the difference with DrawSVG. You can see on heart one (as originally designed) the path starts drawing from an unnatural position. In heart two I’ve made that cut at the bottom and the animation feels better and animates the way a heart would naturally be drawn. Here’s the difference with MorphSVG Again, the first heart and star are left as the original designer created them. You can see the morph looks pretty good, but it has a bit of a twist to it. I used the scissors on both heart two and star two with a cut right at the center of the bottom. This morph looks much more natural. The bottom point of the heart splits into the bottom two points of the star and the twisting motion is now gone. There's your hot tip for Valentine's Day. Happy tweening and morphing everyone.

Always take the red pill. I should know seeing as how I'm from the matrix.

Here's a demo I made as an answer to another forum question, but it has some pinning with horizontal movement. Maybe it will give you some ideas.

@Carl, that is so perfect! Thank you kindly. (Old guy talk for "What's up, yo?") You provided me the perspective (pun definitely intended ) I needed. I will view the suggested videos. Thank you @Dipscom, not sure how to "upvote" folks here yet but the both of you get one. I do intend to wring out javascript as you suggested. My goal of getting to the heart of the matter has been achieved which I am anticipating will yield greater focus efficiencies. With respect to helping others, I intend to so do. I've started by impressing on folks the notion, "I don't want to be like that guy!" and, no doubt have, in so doing, saved thousands. LOL OK, well, maybe impress on them that being a dumb*** actually IS worse than being a smart***.

Morphing a path is good for a lot of things, but it animates every point at the same time. In the codrops demo, the points are animated separately, giving some nice variation to the paths. Quick and dirty version. It's tweening an array of values from 100 to 0. Click to create a new animation.

That's totally fine. We do it all the time.

svg4everybody is replacing the <use> element with the actual actual SVG markup. I think that is what the polyfill does. <div class="wrapper"> <div class="toptaak_icon" style="visibility: inherit; opacity: 1;"> <svg class="alkmaar_icon" role="presentation" viewBox="0 0 150 160"> <g id="maaltijd" data-svg-origin="75.00999909639359 159.99029541015625" transform="matrix(1,0,0,1,0,0)" style=""> <path d="M149.07,5.18a1.74,1.74,0,0,0-.75-1.52,1.69,1.69,0,0,0-.89-.32C128.88,1.91,119.73,0,75,0S21.12,1.91,2.57,3.34a1.69,1.69,0,0,0-.89.32A1.74,1.74,0,0,0,.93,5.18C2.44,43.27.38,82.88.3,121.79c0,1.69,0,10.6,8,13.77,21.07,8.41,40.94,15.88,63.93,23.76a6.1,6.1,0,0,0,5.56,0c23-7.88,42.86-15.35,63.93-23.76,7.94-3.17,8-12.08,8-13.77C149.62,82.88,147.56,43.27,149.07,5.18ZM74.94,49a21.16,21.16,0,0,1-1.1,7.28,11.69,11.69,0,0,1-3.64,5.18,12.5,12.5,0,0,1-5,2.3c6.57,49.23,2.07,65.41-5.23,65.77h-2.2c-8-.36-10.21-16.2-3-65.48l-1.3-.23a12.81,12.81,0,0,1-5.21-2.36,11.45,11.45,0,0,1-3.64-5.18A20.67,20.67,0,0,1,43.46,49V27.38a3.93,3.93,0,1,1,7.85,0V49a13.85,13.85,0,0,0,.63,4.58,3.56,3.56,0,0,0,1.15,1.7,4.4,4.4,0,0,0,1.67.79V27.41a3.93,3.93,0,1,1,7.85,0V56.22a5.57,5.57,0,0,0,2.73-1,3.41,3.41,0,0,0,1.12-1.7A13.09,13.09,0,0,0,67.09,49V27.38a3.93,3.93,0,1,1,7.85,0Zm24.24,81h-.27c-9.34-.39-13.71-8.22-3.92-59.44C79.78,43.08,92.84,22.41,106.32,20V64.78C106.32,114,108.52,129.61,99.18,130Z"> </path> </g> </svg> </div> </div> The startAnimation function is being called because the code you copied from my demo isn't the best example. The .always() call here will still be called, even if what was loaded isn't valid. $.get(svgUrl) .then(injectSvg) .always(startAnimation); That was only for the purpose of that demo because the startAnimation function tries to animate everything in that demo. A better way would be... $.get(svgUrl, function(svg) { container.append(svg.documentElement); }).then(startAnimation); Or for multiple... $.when( $.get("svg1.svg", function(svg) { $("#container1").append(svg.documentElement); }), $.get("svg2.svg", function(svg) { $("#container2").append(svg.documentElement); }), $.get("svg3.svg", function(svg) { $("#container3").append(svg.documentElement); }), $.get("svg4.svg", function(svg) { $("#container4").append(svg.documentElement); }) ).then(startAnimation); The svg that is returned in that callback can be used to append your symbols. So maybe something like this. $.get("icons.svg", function(svg) { var someSvg = $("#some-svg"); $("#some-icon", svg).children().each(function(i, element) { someSvg.append($(element).clone(true)) }); }).then(startAnimation); The problem with using svg4everybody for animations is that it loads stuff asynchronously, so you don't know when the actual svg has been loaded. It's working for you because the file is cached, but for anybody else visiting your page, the animation won't work the first time.

Here is my fork ! Done !

ScrollMagic doesn't do the actual horizontal scrolling for you. Drag the scrollbar and you'll see it works.

Short answer: use xPercent:100 instead of x:"100%". And xPercent:0 instead of x:'0' too. Longer explanation: GSAP supports BOTH percentage-based translations (xPercent and yPercent) AND pixel-based ones (x and y) simultaneously (you can combine them for very useful effects). The browser always reports the computed (current) style transform as a matrix() or matrix3d() with all the percentage-based stuff baked into the raw pixel values, so it's impossible for GSAP to discern that you intended the original CSS to be 100%. That's one of the reasons GSAP has xPercent and yPercent, and it's also why we recommend that folks set transform-related values directly via GSAP whenever possible (because it's faster, more accurate, and eliminates potential confusion with interpolating values compared to CSS). When GSAP gets a %-based value in the "x" or "y", as a convenience it'll just act as if you meant xPercent/yPercent (again as a convenience - the proper way is to define it as xPercent or yPercent). It is actually working the same every time for you but it seems like it's not because after the first tween, xPercent is already at 100. In your openContactAside() method, you're animating to x:"0" which is NOT percent-based, so it does the regular pixel-based translateX. Then in closeContactAside(), you're tweening to x:"100%" (which gets interpreted as xPercent:100) but it's ALREADY at xPercent:100. Make more sense now? Side note: I noticed you had yoyo:true set on your tweens, but that won't do anything unless you set repeat to at least 1. No big deal - just wanted to point that out in case you were confused as to why it wasn't yoyo-ing.

Regardless of the answer, he wouldn't be the first one... This place is visited by CODEGODS (yourself), DemiCodeGods (@Carl), Artificial Inteligences (@Jonathan), The BlakeTrix (@OSUblake), Ninjas (@Rodrigo), Clowns (@Dipscom), nice guys (@PointC) and @Diaco... What difference would a being from the Dawn Of Time make in a forum with such population?

Are you sure you're human? Perhaps you were born on Krypton?

Dear All, I really appreciate your quick response. Thank you Blake, Thank you Dipscom. I have just resolved the problem according to Blake's quoted page. I have taken the animation codes out from the svg file and saved it in an external js file using below plain script. Now the animation works on all devices I possess. Thank you again. Wish you Good Health and Good Luck! Cheers, Alex var script = document.createElement("script"); script.type = "text/javascript"; script.src = "path/to/your/javascript.js"; // use this for linked script script.text = "alert('voila!');" // use this for inline script document.body.appendChild(script);

Hi Carl, Thank you so much for the simple yet effective solution. I will be purchasing the DrawSVG plugin then!

Yeah I see if you unpin the content it is behind the pins. It's weird how it works. Will take some more thought. There must be a way to move the pinned content out of the way. Possibly restructuring the html a little and sliding it up off the screen when we transition to content. Sorry I have to go to bed. If I have time tomorrow I'll look at it some more. The css construct for pins is very odd I'll have to study how it works some more. Since the basic transitioning between pin slides is now working I think it should be solveable.

Remember that best practices are just opinions, and will change over time, but here's how to do a CDN fallback. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <script>window.TweenLite || document.write('<script src="js/TweenMax.min.js">\x3C/script>')</script>

I've never had a good experience using that. It changes too many things. The best thing you can do to make sure your SVG works with GSAP is to get rid of transforms. In most SVG editors, it's simply a matter of ungrouping and grouping stuff. https://stackoverflow.com/a/44021761

Howdy Doug. Welcome aboard! My hat's off to you for >30 years in the business. Did they have computers back that far? I read your post a few times and I'm struggling to understand what your GSAP-specific question is here. How can we help? If you could boil it down as succinctly as possible, that'd be swell. It doesn't look like your site is using GSAP at all yet (not even loading it). No problem - just a little confused about what you're asking. Have you already been through the Getting Started page/video? https://greensock.com/get-started-js/

Maybe you could make that whole div at the top position:absolute, then monitor its clientHeight and use that to increase the height of a position:relative div underneath it (or just increase the top margin of your content, like in the pen below)? (Also, did you try just using scrollTo to stay at the top until the add has finished loading, or the user initiated scrolling?)

This might be a great use case for the "cycle" feature in the stagger methods. https://greensock.com/docs/TimelineLite/staggerTo()

Hi and welcome to the GreenSock forums, You should be able to do exactly what you need with GSAP. You can try all of our premium plugins for free on CodePen: here is something I whipped together quickly In the demo above "tween" could be an elaborate timeline of multiple animations and you would have the same control.

"People"... I'd say collective assortment of singularities. Right, bedtime here. Some of us here still need sleep. Unlike some Douges that only need 2 hours per night and can lift 15 tonnes in one go, allegedly...

hmmmm... @Dipscom has tagged me into this thread and labeled me as 'the nice guy'. That makes me sound a bit boring. Perhaps I should up my snark game and I could be called into threads without demos. PS @Doug Dodge - welcome aboard. I think you'll find this to be an awesome group of people.

Yep, @Carl and @Dipscom nailed it. Hopefully this gets you going in the right direction. Let us know if you need anything else. And keep in mind that my tongue-in-cheek comment about having computers 30 years ago was coming from a pretty old guy too Not quite 30 years in the industry yet, but I'm gettin' there. Fear not - I've learned to respect my elders Happy animating!

That doesn't sound like something that would be good for tweening. Look at the demos in Chapter 5. http://lamberta.github.io/html5-animation/

Just like the Picasso quote: "Good artists copy; great artists steal."

I think there are a few other clean-up tools out there too, but I've honestly never used one for production work. I try to control most everything coming out of AI. It adds a few things that I don't like, but they can quickly be deleted. I find the more meticulous you are about preparing artwork, the easier your animations will be.

I stole a good portion of it from the codrops demo.

What he said.

Oh! I just noticed a problem. You had the wrong parameters for a to() call. It should only have 3.

That's what my first post was about. I even linked to svg4everybody. You can't animate what's inside a <use> element directly. Everything inside of it is hidden inside a shadow-root.

You were using really old version of TweenMax, I updated it to latest version and it fixed the issue on chrome.

You can pass an array of parameters as third argument. TweenMax.delayedCall(2, functionName, ['first', 20]); https://greensock.com/docs/TweenMax/static.delayedCall()

My personal opinion? Libraries like GSAP: External CDN link with a fallback to a self-hosted version.

I will just suggest you to search how google treats hidden text and content, some articles say they devalue the hidden content but from personal experience completely hidden links still get indexed. Personally, I hide everything using CSS and then I use another CSS file inside noscript tag to keep content accessible which should have some positive effect on SEO.

Hello @Oskar and Welcome to the GreenSock Forum! Here is a jQuery Plugin i made awhile back that takes an image, then slices it up, and uses GSAP to animate the sliced elements. In the following examples I slice an image automagically into div elements with the right background position on each slice to make the image look like one image. Then I use a staggerTo() and animate using x (translateX) and or y (translateY) axis with overflow hidden on the container to create that effect for you. It requires GSAP to run animation, its free to use as is. When i have more time i will account for responsive and other types of effects. Has various combination of options: number of tiles in x or y axis (horizontal or vertical tiles) duration stagger delay direction margin for grid wall metro type of look (spaces between each slice for metro grid) Happy Tweening

I don't think there's any question that something odd is happening on the live site. As Jack mentioned, since it works fine on CodePen there has to be something else interfering. This doesn't appear to be any problem with GSAP. It does seem like some sort of sizing or transform-origin issue. I tried looking at your live site, but there are just too many scripts loading and without editable code, its so difficult to debug. I'd recommend starting with the code from the demo and just keep adding scripts, styles and functionality until the behavior appears. If you could make it happen in a simplified CodePen, we should be able to point you in the right direction. Happy bug hunting.

Aaaand a fancy new pen and now I'll stop spamming this thread. Thanks again everyone for the help!

Hi @DeuxAlpha Welcome to the forum. I'm not familiar with Inkscape so I have no idea how to control its SVG export settings, but you can always drop your SVG into a clean-up tool like SVGOMG https://jakearchibald.github.io/svgomg/ I'm not sure if you're just presenting minimal code in your question, but neither code snippet would actually draw a circle as you're missing some attributes. At a minimum you'd need a radius for the circle and usually a cx/cy if you don't want it at 0,0. Hopefully that helps. Happy tweening.

Hi @damonjentree Welcome to the forum. If I understand your question correctly, the DrawSVG plugin is made for that type of animation. Here's a fork of your pen: That would be the easiest way to animate the line and you wouldn't need a mask or clip-path. That is a Club GreenSock plugin, but you can try it for free on CodePen. Here's some more info about the club. https://greensock.com/club Hopefully that helps. Happy tweening.

That's a good start. From what I can see here, reading your code, it still is expected behaviour. As mentioned before, you cannot stop the scroll, so, while the code works in the first scroll, as soon as you scroll again, the windown will naturally scroll as there's nothing preventing it. Even your if() statement inside the refreshScroll isn't doing anything at that point as you toggle the firstTime variable to false thus, that block of code inside the is statement no longer runs. I am sorry I can't do much other than point issues out, I am a bit under other stuff at the moment and can't spare any time to try and tackle that myself. My suggestion to you would be - following Blake's smooth scroll idea, to have your main element body fixed, listen to the scroll event and set a flag 'shoudScroll' then you toggle that flag true or false. While true you translate the fixed element up or down according to the scroll event, while false, you don't.

Using a little vector math, this is actually pretty easy to do. All you need to do is scale a vector. It's too bad JavaScript can't do operator overloading like a lot of other languages, because this could be a one-liner. var newPoint = (point - center) * scalar; Vectors are like points, but they have a definite direction and length, so the ratio between the x and y values is constant. This means you don't have to figure out the angle for a position. If you know the length of the x or y axis, you can figure out the other axis by multiplying it by a ratio/scale. If you've ever calculated an aspect-ratio for an element, like during a screen resize, it's the same concept. You can see how it works in this demo. As an element moves away from the center, the rate of change between the x and y axis remains constant. So to pull this effect off, all you have to do is multiply the difference between an element and the center by some scalar value. Check it out. It creates a pretty cool effect. It's pretty uniform right now, but you could add some randomization to it. Changing the stagger value can dramatically change how the explosion looks.

A few folks have asked about errors they get when they try to run JSHint on their projects that use GSAP. Most often there is nothing wrong with their code but JSHint has no idea about GSAP classes (TweenLite, TweenMax, CSSPlugin, eases and more) defined in external files so it throw errors. The video below illustrates how to define GSAP globals so that JSHint will skip over GSAP classes when looking for errors. If you use JSLint the same concepts apply with a slightly different syntax. We’ve included JSLint resources in the downloadable files below. The gloabls{} object below can be added to any .jshintrc file. { // Enforces undefined globals "undef" : true, // Defines common browser globals "browser" : true, // Also don't enforce these globals "globals": { //GSAP Globals "TimelineLite" : false, "TimelineMax" : false, "TweenLite" : false, "TweenMax" : false, "Back" : false, "Bounce" : false, "Circ" : false, "Cubic" : false, "Ease" : false, "EaseLookup" : false, "Elastic" : false, "Expo" : false, "Linear" : false, "Power0" : false, "Power1" : false, "Power2" : false, "Power3" : false, "Power4" : false, "Quad" : false, "Quart" : false, "Quint" : false, "RoughEase" : false, "Sine" : false, "SlowMo" : false, "SteppedEase" : false, "Strong" : false, "Draggable" : false, "SplitText" : false, "VelocityTracker" : false, "CSSPlugin" : false, "ThrowPropsPlugin" : false, "BezierPlugin" : false } } The downloadable zip contains .jshintrc, jshint-inline.js, .jslintrc and .jslint-inline.js. The jslint files work in the same fashion as the jshint files. Remember, .jshintrc and .jslintrc files will be hidden unless your OS is configured to show hidden files. GSAP_Globals.zip These files are provided strictly for your convenience, with limited support. You may need to modify them as new tools are released.