Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

franklylate

Members
  • Posts

    6
  • Joined

  • Last visited

franklylate's Achievements

Newbie

Newbie (1/14)

6

Reputation

  1. 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
  2. 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
  3. 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
  4. 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.
  5. Had a typo and stripped out brand content. Thanks a million, @Jonathan
  6. 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!
×