franklylate

Hi all, the Learning center is a great resource for writing better GSAP code but I'm continuously finding I don't know what I don't know and continually feel like I'm doing sectional animation loops wrong. The latest version of GSAP logged numerous missing element warnings because I'm running the same tweens on elements within .animategroup — the content is changing on different sections of the page, occasionally h2 and h3 aren't present on that particular section. I can turn off logging errors in the newest GSAP but this question is coming from the place of "well, it's working but am I doing this right?": Is there a structured course that gives a high level overview of GSAP that you would recommend? Thanks

Unfortunately my user base is still 10% IE11. Canvas isn't an option since I'm exporting an SVG from Illustrator and would prefer to not recreate in JS. Can you tell me more about not using strokes? Not certain what that entails. Thanks!

Hi all, bit of a conundrum: I have a rudimentary globe and looking to animate a simple spin. I've decided on using scaleX and transformOrigin: "100% 50%" to just scale over to -1 and it works 'perfectly'. Unfortunately scaleX also scales the stroke—I tested vector-effect="non-scaling-stroke" but unfortunately it removes the proportion / resizing attributes that I'm relying on to keep the SVG working as intended in IE11. Besides switching to stroke-width: 3.5vw and media queries or some variation, any simple solutions?

That makes a lot of sense -- I completely blanked on <g> elements since my Illustrator was set to minify the svg. I put together another prototype and dropped a circle as the anchor and used its xy coordinates as the svgOrigin for the part. This cleaned up everything really nicely! Thanks https://codepen.io/jcollette/pen/GawLgy

Hi all, in AfterEffects you're able to pin animation pieces together at joints and they inherit transforms and I couldn't find any documentation on how to do a similar workflow properly in GSAP. I started picking apart the "Howl's moving castle" animation example and saw that the divs contain img elements and nested again within other divs and positioned using absolute so the transforms flow down properly to smaller elements. Tried out my own version on a simple scale animation. Works fine, but got me thinking: is this the most effect way to animate complex components or is there a GSAP structure I should be using? e.g.: nested containers and graphics for "torso > leg > thigh > shin > foot" vs "foot pinned at x,y to shin pinned at x,y to..." Any guides or reassurances would be appreciated! Thanks

Nope, you guys have it exactly correct! .rotateG g, .rotateG { transform-origin: 50% 50%; } wasn't producing the expected behavior but svgOrigin and transformOrigin in the tween is working exactly as it should! Thanks Updated codepen with loop+rotation at https://codepen.io/jcollette/pen/zQOEeE

Hey all, I saw a lot of chatter on here that SVG G isn't necessarily supported but figured I would check -- I'm getting a really odd matrix transform for rotation on a SVG G elements. Seems like it's getting a translateX + translateY movement as well and swinging the animation strangely. Works perfectly for just SVG and I could rewrite to break out the g elements to separate SVGs (processor GULP!) but figured I'd check before I consider. The browsers we're supporting take in transform: rotate(90deg) correctly on SVG G and I could probably rewrite for CSS tweens as well but they're always a pain. Anyway, let me know eitherway! Thanks --- I didn't fork the broken codepen and now it's working as intended with the updates below.

Had a typo and stripped out brand content. Thanks a million, @Jonathan

Hi all, I've been using a lot of the forum for reference lately but finally found an issue I couldn't find asked previously: I'm created an animation similar to the Matrix "falling code" effect but ran into some difficulty creating a loop and ended up just copy and pasting the tween and updating the nth-child(#) 30 times. I created a function set to return a randomized number and am using that function to randomize the animation lengths. The code snippet sets all the y tweens to the same animation length since the function only triggers once: introaniTL .from("div.tilecontainer img", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18), ease: SteppedEase.config(18) }, "tg") .from("h1", .5, { autoAlpha: 0, y: '-20' },0, "tg"); While I'm fairly certain I'm using the .add function wrong in this snippet: for (i = 1; i < 32; i++) { introaniTL.add.from("div.tilecontainer img:nth-child("+i+")", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18), ease: SteppedEase.config(18) }, "tg"); } Does anyone have insight? Working (and brute force method) animation below. Thanks! // // add individual tweens here as necessary // var introaniTL = new TimelineMax(); introaniTL .from("div.tilecontainer img:nth-child(1)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18), }, "tg") .from("div.tilecontainer img:nth-child(2)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(3)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(4)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(5)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(6)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(7)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(8)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(9)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(10)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(11)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(12)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(13)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(14)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(15)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(16)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(17)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(18)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(19)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(20)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(21)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(22)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(23)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(24)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(25)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(26)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(27)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(28)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(29)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(30)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("div.tilecontainer img:nth-child(31)", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18) }, "tg") .from("h1", .5, { autoAlpha: 0, y: '-20' },0, "tg"); var introaniScene = new ScrollMagic.Scene({ triggerElement: ".introanimate", triggerHook: animateall_OffsetHook, offset: -400, reverse: animateall_Reverse, delay: animateall_Delay }) introaniScene.setTween(introaniTL); introaniScene.addTo(controller); // introaniScene.addIndicators(); // This is for debug indicators function randomPoint5to2() { // return Math.floor(Math.random()*(max-min+1)+min) -- returns whole numbers return Math.random()*(4)+1 } Thanks all!