Leaderboard

Trick to fading a background image and not the content is to separate the two from a markup standpoint. Using a container div with its position set to relative, place two children within the container; one for the background, one for the content. Set both of their positions to absolute, width 100%, height 100%, and be sure sure the stacking order places the content over the background (or explicitly set that with z-index). You're now free to animate any property (autoAlpha) on the background-image div without affecting the content div. Of course, you'd probably want to mess with some layout options to accommodate things like dynamic height (based on the content), but this should get things going in the right direction.

Woow the pen used was highlighted in Codepen;)

I think that will work better using a liveSnap function, kind of like this demo.

Hi @dghez You probably need to restart your timeline. Calling play without a parameter just plays it from where it was, which is probably the end. route.timeline.restart(); // or route.timeline.play(0); https://greensock.com/docs/TimelineMax/restart https://greensock.com/docs/TimelineMax/play()

That's not to say you haven't done things right! Your markup makes sense and is structured appropriately for its static (and default) purpose. I'm actually not a fan of bending markup to make Javascript work; I would actually use Javascript to modify the markup to make the Javascript work (i.e. progressive enhancement). That has a nice consequence; where Javascript isn't available (environment, errors, etc.) you get an appropriate outcome ... basic, unobstrusive HTML and CSS. So, in your case (and using my pen as an example) I would actually do something like this ... Now, I did the manipulation in a fairly verbose way ... it could be consolidated ... but I spelled it out to illustrate the manipulation. If this were to affect multiple elements on the page I would have wrapped the manipulation in an .each().

Nice! I added a link to your CodePen profile in the description. And you have some really cool demos. If you tweet something you made to @codepen they might pick it.

The extra space is just because of those indicators which are only used for debugging purposes, if you comment out 'addIndicators()' line, you can see how it will look without indicators. Trigger position can be changed using triggerHook. 1 means 100% of viewport 0.9 means 90 and so on. Again, the video tutorials I posted in my previous reply, they explain all the basic stuff including triggerHook. Then the examples page shows every possible use case.

Not sure why you even need svg for this. Everything in your demo can be done with HTML. Messing with foreignObject is trouble. The only reason I would ever use it is to render HTML to a canvas element. If you want to scale text, you can use an aspect ratio to figure out the scale value.

Thanks for the suggestion. I can see how there are cases where additional callbacks could be useful, but we really try to keep the API as lean as possible in terms of files size and performance. In addition to files and performance, when we add features there's usually a strong case to be made that involves both: something that is in high demand can't be achieved with existing API methods With methods like paused(), isActive(), progress() you can pretty much get any type of state info that you need. In most cases where you want custom code to run whenever an animation is paused you can wire up a function like function pauseAnimation(animation) { animation.pause(); console.log("the animation has been paused"); //more custom code } then later //pauseAnimation(intro) //pauseAnimation(anotherAnimation) On a larger scale you could use a more object-oriented approach where perhaps each animation is the property of an object and that object has custom methods for controlling its animations, firing events, clean up, and all that stuff. Again, your suggestion is appreciated and valid. We always monitor how high the demand is for these types of things and your suggestions always help.

I guess the best solution for now is to tell people to import plugins without a name. Since everything gets added to the GreenSockGlobals object, which is probably the window, you should still be able to call the plugin by name. import "gsap/MorphSVGPlugin"; // Should work as it's global MorphSVGPlugin.convertToPath("circle");

Ah, it looks like Microsoft browsers botch the placement of ":checked" when reading things via JS. Try this: infoCss = CSSRulePlugin.getRule('#info-input:checked ~ #info-inner') || CSSRulePlugin.getRule(':checked#info-input ~ #info-inner'); Notice Microsoft shoves it to the start.

For anyone who can benefit from it I found this discussing it https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/. The solutions contained in it appear to fix the issues in ie11 at least for inline svg code and svg in img tags that i needed it for. in my case this worked: width:100% on img tags and on containing element for svg objects/code i.e.(div.svg-container > svg) .svg-container { width: 100%; height: 0; padding-top: 100%; position: relative; } .svg-container svg { position: absolute; top: 0; left: 0; }

Looks like @Carl beat me to it. There were some corrections needed there. For my two cent opinion, I'd add that you could also achieve an animation like that by simply staggering the rotation of the circles. Something like this: Happy tweening.

Hi @Syniky, Welcome to the forums. That is because 3D transforms are not really supported on browsers. At least not yet. In order to have your doors rotate in the Y axis, you will have to separate them into DOM objects. That way you will get the rotation as you expect.

Yeah, animating any of the background properties won't affect the element's children since the background doesn't cascade. Too bad there isn't a "background-opacity" property! So you can change a background's color or position without affecting the element's content. Opacity, on the other hand, affects the the element (not simply its background) and all its children.

Don't put your scripts inside the head. Put them right before the closing </body> tag. <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Train Morph</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <svg> ... </svg> <script src="js/TweenMax.js"></script> <script src="js/MorphSVGPlugin.js"></script> <script src="js/main.js"></script> </body> </html> There is no need for the jquery file. You only need to reference TweenMax and the MorphSVGPlugin files for this. Put your animation code inside the main.js file. Just remember that everything is read from top to bottom. First it needs to read any CSS and HTML/SVG. Then it needs to read the GSAP files. And finally, it needs to read your code.

Here's some ideas for function-based values. The animations are pretty blah, but most of them can be spiced up by using a stagger. Quick fork of the spiral.

see answer here:

Ah you're the best! I was just curious to see how it would be done. You've more then answered that, aha. Thank you <3 Both look awesome

I'm not 100% sure what you want the animation to do. The 1st demo you posted has some half circles rotating back and forth, but you also mentioned Carl's demo that draws from 0,0 --> 0,100 --> 100,100. Is this what you're trying to do? Or were you wanting the lines to yoyo like this: Hopefully those point you in the right direction. Happy tweening.

Have you gone through the thread I mentioned? If you are looking to create something similar that people usually do with scrollmagic throughout your project then there are some approaches that you can take. If you just want to fade opacity then following demo shows how you can do that with pure JavaScript and GSAP. If that doesn't help, then post your reduced case demo so we can see what you are doing and what you wanna do.

if you want to drag the red items inside their current parent and force scrolling as you drag down, look into autoScroll https://greensock.com/gsap-1-16 If you want literally take the red items out of their parent and put them inside the blue div, you will probably do best with a cloning technique as shown here by @OSUblake: READ THIS:

Yup, dipscom is exactly right. For slight clarification, the issue is that you are trying to do 3D transforms on SVG elements. Some browsers will allow it but it isn't technically part of the SVG spec.

Hi @dgmldr, Please have a look to your CSS .slds-notification { position: relative; width: 20rem; border: 1px solid #ecebea; border-radius: .25rem; box-shadow: 0 2px 3px 0 rgba(0,0,0,.2); transition-duration: .4s; transition-timing-function: ease-in-out; transition-property: margin,max-height,opacity,top; If you try ... .slds-notification { position: relative; width: 20rem; border: 1px solid #ecebea; border-radius: .25rem; box-shadow: 0 2px 3px 0 rgba(0,0,0,.2); /* transition-duration: .4s; */ /* transition-timing-function: ease-in-out; */ /* transition-property: margin,max-height,opacity,top; */ } you will have a clear responsibility for the job - done by GreenSock. Kind regards Mikel

Oh my lord, you guys are way too kind. This forum is honestly the best I've ever been on! Can't wait to be good enough to give back This example rocks man. I've just read your guides. Very informative, although I'm still struggling with why variable width strokes won't work. Could you shed some light on that? I'd love to be able to make the tight turns on the S & A even if it means spending hours in illustrator aha. If you still have it I'd love to see the project file so I can see how you've layered everything including the strokes, then I can compare it to your example and figure out what the different strokes look like and how I can recreate this for myself. Once again, thank you SO much, Smallio

Hi @smallio If it were my project, I’d probably use masks as @mikel suggested. That route will most likely give you the least number of headaches. That being said, you can recreate fonts with consistent stroke widths. Here’s a quick example of the word ‘social’ from your demo. You can see that the ‘s’ and the ‘a’ aren’t exact matches, but they’re close. The problem with the ‘s’ is the tight turns. When you have a closed path, you can easily make the curves, but now we have an open path with a stroke running down the middle. The turns look less smooth as the stroke gets wider. The ‘a’ has a variable width stroke on the curved portion which won’t work so I just made it consistent all the way around. When you have projects like this, you can usually make it work by recreating the font, but you may have to make some artistic choices that will make the font appear slightly different than the original. If you’re using AI, the pencil and/or curvature tools are great for this type of work. I wrote some posts on CodePen about recreating fonts and the handwriting effect. You may find some useful info in them. https://codepen.io/PointC/post/animated-handwriting-effect-part-1 https://codepen.io/PointC/post/animated-handwriting-effect-part-2 Here’s the final demo from those posts. Hopefully that helps. Happy tweening.

Hi @jimthornton, and here is a rough concept for an animation that is activated by scrolling: Make the best of it ... Mikel

Hi @smallio, Exactly right, drawSVG only works with strokes. But "writing a special font with strokes" is almost impossible. @PointC has some examples in the forum that cover this topic. I quickly found this. The trick: "use drawSVG to animate the mask and reveal the logo" or a letter. That is still complicated for all letters ... Happy masking Mikel

You are adding the class active to project instances but you are telling gsap to animate the items overlay etc... which is animating all the items regardless of what happens to the project element. The pen attached moves the variable declarations inside the function and queries the elements inside each specific project element rather than the document. This way you don't need two scenes and timelines. A scene and timeline is created for each instance of project and reacts to the trigger independently. I think this is what you're after. For whatever reason forEach cannot be passed 'this' directly so we pass it as a variable reference 'self'. Class toggle active is not required for the animation but you can retain it for other scripts if needed.

As you're using TimelineMax, there's no need to use a function to have a back and forth repeat. I only used that because I assumed you wanted to trigger a reverse when something else happened. Nesting timelines is the way to go. You will be able to create crazy complicated sequences without losing your mind and ending up with 5 kilos of spaghetti. If you feel you can handle moar awesomeness: https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca Well, if the two of you are on first-name terms, surely you can sweet talk her into understanding the value of some charity.

Outstanding post, Craig! I'm new to the Greensock world (just asked my second question this afternoon ha) and reading through your story has inspired me to learn Javascript via GSAP. It's ironic, as I was driving home from work this evening, I thought to myself "this GSAP thing could really help me learn Javascript as a whole". You're right, it's actually fun learning this way. Greensock is simply amazing. I've already had wonderful experiences with @Carl and @mikel. Seems like a great little community and I'm happy to be a part of it We have a lot of similarities, just from reading through your post. I'd like to thank you for writing this and know that it has inspired me (and probably a lot more) to continue down this scary path. -Shawn

Hi @TomWWD, I hope I did it right quick. Use onComplete, so that only after the end of the "bloganim" the mouse function is feasible ... Happy blocking ... Mikel

I feel like this is such a major shift in what GSAP is able to do; it's not really an 'animation' platform anymore, it's more like a 'universal real-time animation and element manipulation platform'. The one problem I have is that I feel the docs could benefit from a revamping now. I've come back to the forums to find the answer to my question above, and I did, but in the process I found out about a bunch of other things that could have made my life easier before, and that are only documented in forum posts or release announcements. (For example, the function-based values are not mentioned in the docs for TweenLite.to, when it feels like an incredibly important thing to know about.) This is not really a criticism or anything, I just feel like right now the thing that GSAP would benefit the most from is not new features or revisions, but rather an improved exposition of its capabilities (again, at this point it's so much more than an animation tool – I could probably make the case for its use as a full-blown HTML game engine) and a reorganisation of the docs to give an immediate idea of all the possibilities (the main page for TweenLite, TimelineLite and their Max counterparts are very long descriptions of their most basic use – and that could be relegated to the corresponding TweenLite.to page). Just my two cents!

Why do you need to do it inside an svg. The animation you are creating can be created regular html elements, it doesn't need to be inside an svg container. At the very least the text doesn't. As noted if you must use svg I think svg text would be much better than injecting html text. Regardless, if you are injecting html text in the svg and you know the size of the svg relative to the dom is consistent. Ie 100% wide, 50% wide etc you could apply font size based on vw viewport width units. You'll also likely have to tinker with the html containers including the size of the foreign object itself , I don't believe the svg will trigger them to resize, they will probably have to have percentage or viewport based sizing which will hopefully be honored within the svg rather than arbitrary pixel based sizing.

Hi @multivac Let us know how the above codepen helps https://codepen.io/jonathan/pen/jYoaxB

Hi @LachlanTS, Why are you making it so hard for you? SVG text in paths can solve the task. Kind regards Mikel

You, my friend, will need to step into the wonderful and mesmerising world of MATHS. Have a look at this channel by Keith Peters, it will teach you tons about calculating physics-like movement. https://www.youtube.com/user/codingmath

Hi @fencepencil, @Carl`s idea with the loop is perfect. Attention: the dots are manually sorted in the SVG! If this is done, the code line 3 (your pen) would be obsolete. Happy pointing ... Mikel

Hi @fencepencil, Welcome to the GreenSock Forum. You can cut a lot, for example: var dots = [].reverse.call($('.dot')) // order of the dots - this code requires jquery or you the order in your svg waveDots.staggerFromTo(dots,0.8,{y:-7},{y:7, ease: Sine.easeOut,repeat:10, yoyo:true},0.4); When the letter morphing starts, you can use e.g. an 'onStart' (more here) to stop the waveDots animation and set it to progress(0): .to("#dot1", 0.25, {morphSVG:"#f", onStart: stop }) function stop(){ waveDots.stop().progress(0); } I hope this is helpful. Mikel

Hi @Awmat, step by step - looks good. 1. Use 'visibility:hidden' in CSS. 2. Watch 'Animate along on SVG path' (here). 3. In the DOCS you find: So you could even animate a dash from one end of the path to the other, never changing size, like TweenLite.fromTo("#path", 1, {drawSVG:"0 5%"}, {drawSVG:"95% 100%"}) Here some modifications: Happy tweening ... Mikel

How deep do you want to go down in this rabit hole? The least complicated is to have a global object that would be your manager. Have it emit events whenever something is done and use listeners to catch those events. If you want to go full on hipster-dev get your head around React or Vue, they have state management plugins that would help. Disclaimer: I'm totally biased towards Vue.

@OSUblake my love/jealousy of you unhuman ability to be here, catalogue and remember information never ceases to increase. Please never reproduce, there would not be any webdevelopment work left if there were more than one of you.

How did I not come across this before?!?!? Must set aside time to deconstruct this plugin and understand it. MIGHTY CODEGOD! WE THANK THEE BOUNTIFUL! *bow*, *bow*, *bow*

OooOOOooo! Gossip! ! ! ! It ain't me so, now I'm curious!

Hi @simonb, Welcome to the forums! There's going to be no end to talented individuals and agency teams here. You're in for a ride I'm a freelancer myself, based in the UK. Here's some work from last year - you might notice a theme with these as this one client kept me busy for most of the year https://flowers.penhaligons.com/ http://www.penhaligonstimes.co.uk/ http://mysterymansion.penhaligons.com/ - (notice: has music)

Hi @Awmat, 1. Look at this part of the docs: autoAlpha Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. //fade out and set visibility:hidden TweenLite.to(element, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenLite.to(element, 2, {autoAlpha:1, delay:2}); 2. Please take a look at these explanations: https://greensock.com/position-parameter And: try the GSdevtools (more here) - its a great help. Just a few modifications here: Happy tweening ... Mikel

Hi @Awmat, Some typos eliminated and this is your pen: Is the process as you expected? Kind regards Mikel

Wow Blake, I really appreciate how helpful you are in helping the participants in the forums, I really do leave to ask you here after you have researched a lot and have not found any solutions and it is of extreme importance these supports that you give, I will make an outburst here if you have someone who indentify, I started to venture into web development about a year ago and I decided to do it myself, I never worked in an agency or any other place that had someone to give a direction on front end development. I was learning alone as the need arose and I wanted to make my projects more interactive. And thanks to you I see that my development improves every day. Sometimes it seems kind of lazy to come here to ask you something that is simple and obvious to you. But for those who are starting it is a super challenge and every detail that you show in the code of support that you make of a horizon for those who are in search of new knowledge. Something that maybe alone would never be able to achieve. Thank you sincerely on behalf of all these helps that you give us, it is very Important! Thank you.. @OSUblake @Sahil and the other moderates.

I’m so sorry to hear about the disappointment. I just issued a full refund. Your satisfaction is guaranteed. We’re passionate about having happy customers around here and I’m really bummed to hear that you didn’t feel like the membership was worth the cost. And yes, if your goal was to have GSAP do all the physics logic in your game including collision detection and bouncing, etc., that’s not really what the animation engine was designed for. A physics engine is a totally different beast, and there are some significant down sides to physics engines that make it poorly suited for a tween-based system. Each has its pros and cons, of course. You could definitely use GSAP’s ticker to run whatever logic you want, but that doesn’t solve the problems you referenced regarding collision detection, bouncing, imposing boundaries, etc. I’m very sorry if we communicated things poorly on the site and gave you the wrong impression about what GSAP is for. To answer your question about the event callback, you could definitely do the collision detection in an onUpdate (or TweenLite.ticker.addEventListener()) and then just create a new tween at that point when you're changing direction. GSAP has auto-overwriting enabled by default so you don't even have to kill the old tween (though you could if you want). Happy tweening (or physics-engining)

Yep. You can use the ModifiersPlugin for that. Check this out... If you're curious, most of the demos I made for the ModifiersPlugin are based on techniques shown in these videos. The author, Keith Peters, uses canvas, but the concept is still the same for DOM elements. EASING AND TWEENING PART I EASING AND TWEENING PART II Those videos build off of these videos... NORMALIZATION LERP MAP