Jim Nayzium

I agree for sure about over engineering!! And there is no physical way possible you can offend me! I love any time a person offers correction and or advice!! (Even on StackOverflow when they crush hours of my novice google-and-pasted work !!! I love learning the right-er way of doing things!!) i sort of did exactly what you said. I got it all working with zero animations. And it instantly changes to exactly what I wanted. But then in the actual web page where it will be deployed the instant change was confusing and didn’t lead the eyes to make the jump pop to a sticky menu type thing make a lot of visual sense. This is what led me to attempt the animations. My first go actually just had a duplicate of the content with different classes to display the content horizontally more effectively in a 4x1 instead of a 2x2. And a simply hide show JQUERY which was almost acceptable. But intuitively it lacked that mental “click” of “this new horizontal thing appearing is the same content that you just scrolled by.” So that’s when I embarked on trying to show the client scrolling that these four div tags literally move and resize to land in their new locations. As for rewriting my code - don’t worry!! Just the ideas are enough for me!! ScrollTrigger seems so much better already it makes me feel dumb for not learning all that Gsap has to offer first!! It’s like an entire twelve grades of school and this project is pressing! Hahha. I will work up a scrolltrigger Version today and I bet a ton of stuff just solves itself!! thanks again!

Okay - because I am so new to GreenSock, I am actually proud of my first little victory here! Thanks for the help with the FLIPPING TUTORIAL to JACK@Greensock (Not sure how to tag someone yet, but Jack posted the Flip tutorial codepen in another thread I was commenting in and it was amazing!) So now my questions remain: OF course there has to be a better way for what I am doing here! What are the better ways to do what I am trying to do with the scroll functionality?? (You will see my "doodoo" variable counting the number of times the function fires, and I am sure there is a much better way than that surely?) **Forgive the use of the "var doodoo" as this is my way of marking my own code with things I know intuitively are not being done "the best way" but are, in fact, doing what I hoped to accomplish, even if it's lucky! ? Everything I tried as an alternative, kept running the functions over and over again while I was scrolling so it would reset the animations in a very undesirable way. I am sure there is an elegant solution once I see it, but my experience with .onScroll functionality is novice at best. Is there a better way to detect the NEW HEIGHT that the "must-read-this" div needs to know in order to "move down enough to be seen under the animation?" I assumed that it would have to be calculated in the onComplete function since the height won't be calculated until that animation is complete, right? I would much prefer it all happen at the same time instead of incrementally like it is now, but I can certainly live with what I have created here!! There is always one little flash of it not quite working then presto it works!! I am sure that is my coding CAUSING that somewhere but I couldn't figure it out. Cool points to whoever does see where I have doubled-up something and or omitted something. I bet it's related to number 4 EDIT: added number 6 -- Also the CodePen at the CP site doesn't overlap the newly floated fixed boxes at the top. I would prefer the WWW and YYY boxes wrap their text and just fit together properly whether at codepen or on the forum. Any ideas there? I thought flex: 1 0 auto would do that... maybe I needed flex: 1 1 auto so it would shrink? THANKS FOR ALL THE HELP -- LOVING GREENSOCK!!

HOLY HECK THATS EXACTLY what I want to do -- (at first glance!) I hope you are right! And yes, I think I figured out the permissions thing by setting the style inside the page also. And yes, I also abandoned the the RULE plugin for the variable as my first method of solving it, but then couldn't understand the chart link under the --myVar tutorial that I clicked that said, "browser support is pretty good these days." It felt like there was a LOT of red on that chart, so I thought it could be the type of solution that only worked for "a lot" versus "most" browsers! I will try out the flip plugin for sure!! Looks perfect.

If I download the .js files and load them locally instead of CDN will that skirt these permission issues? I am loading mine locally and got the same error with the same CSSRulePlugin. I am attempting to change the rule because of simplicity. It may be better to do a tween instead on the property, I am not sure. I need my divs to go from flex-direction: column; to flex-direction:row. I thought about just making entire separate classes, and using jquery to do it, but it was a way to start learning and using GSAP so I gave it a shot. Then got the same permssion issue. I am for sure on a local.testingonmymachine.com though so I my first question above is still in play. THANKS!

That's incredible Blake! Are you OSU, "I'm a MAN!!!!" OSU?? I have no personal chip in the game, just curious if it was OKST or Buckeye? So, dumb this down for me a bit. If I have a super tiny .SVG file already premade that I like, is using the <img src="xyz.svg" /> the same thing as using "images" ?? And if so, are you saying I should do it that way OVER just drawing the SVG natively inside the script itself? Currently, what I am doing is using the DRAWN SVG file inside the CSS Background for a div, and then having my generator write the DIV element everywhere... but I haven't tested it thoroughly with hundreds like your script does!! I can't wait to pick that apart and learn inside it.

Okay, I lied. I took a look at the code while on my errands in the car! hahahah -- So, chaining the dots array to the already established TL variable is what makes it run sequentially? So I was wrong in assuming that I needed to do a bunch of math in my head to figure out when to trigger things like duration of 5 in both and delay of 4 in one type math. Right? I was wrong to assume that was neccessary! That's great news. Also, as I look at the code, is it the TIMELINE that makes it all work or is it simply the chaining the next set of effects to the dots variable? I am curious if all you had done was chain it together what it would then look like? Or is the timeline plugin what makes it all stay linear no matter what? (Which would make sense, hence the name "timeline"

THIS IS insanely wonderful! And thanks for reading the intro! I realize it's long winded! hahaha. I will take a look at the code when I get back to the computer this afternoon but watching your codepen it's 100% a homerun perfect for what I wanted to achieve, so I am sure it will make sense when I see it. Hoping this stuff starts to click (like I am fairly sure it will!!)

A little introduction: Forgive my ignorance as I fly through all these tutorials! LOVING this universe so far! I was an old Macromedia Coder back in Actionscript 2.0 and used to make complex-crazy-overkill-ALL-with-super-annoying-sound-effects-on-every-rollover websites back in 2001-2006 and then changed careers and still dabble with coding projects now and then. I have been searching for something that would operate like my old Flash mind was used to operating and this is by far the best experience I have had. I realize the new world of HTML5 and things like GSAP are way way better and more useful than SWF files were! But still, as a novice coder with PHP, MYSQL, and jQuery/Javascript, who used to default to doing EVERYTHING in FLASH, this is like the good Lord has finally answered my prayers! KUDOS to the development team. I joined for the Business level just to pay you guys more. I don't know if my projects will ever truly get off the ground but maybe they will one day!! As odd as this will sound, I actually have spent the last fifteen years doing stand-up comedy! I know right? A coder who does stand-up. Well I will add more to the mix. I was a football coach and head drama instructor at a high school for ten years before any of this! I did my school's website in pure HTML right as CSS became a thing and no other schools had websites at the time so it was cutting edge! The first time I applied a class to a title on a page and it applied to every title on the site, my board literally GASPED. HAHAHA. Of course it was just a vomited plate of spaghetti code interweaving table tags with non-optimized high rez jpg team photos (which loaded 10 to a page no less) for each sports team. HAHAHAH! Anyway, I then started doing stand-up comedy full time in the mid-aughts, and never looked back. However, I maintained some website work as I started stand-up just to pay the bills, as my company I started while teaching (which did NFL Films-ish Highlight video for colleges and high schools also started doing complex FLASH websites for my clients!) So, as I transitioned to comedy full-time I kept coding the occasional project and let my old clients continue to pay me. All that to say, I am in heaven with this GSAP!! SO HERE IS MY QUESTION: When I apply a basic gsap.to(element, { object } ); Can someone explain this to me in simple, 5th grade terminology please. If I want to apply two different sets of gsap.to iterations to an element, and time them correctly to overlap and fire at the right time, what is the best way to go about that? Let's pretend I want to make a bunch of stuff happen to an array of objects and that will take "duration: 5" to occur. But at the 4 second mark, I want ALL THOSE SAME objects to start spinning "rotate:720" for 1 second, which will be the last second of the original 5 second animation. So below is my current attempt, but the "blaster" effect fires at the same time as the original Physics2D and it all happens at the same time. What I want to happen is for the fountain to shoot up for 4 seconds applying its gravity setting etc.... THEN as it crosses the 4 second threshold, no matter where the falling dots are on the screen, they then get the BLASTER effect applied to them and that effect executes for the remaining ONE second. I realize the timeline is probably my friend here, but I have not fully understood the timeline code yet, so if I am using it below it's BY ACCIDENT. The fountain PHYSICS effect I want didn't seem to utilize the timeline animation concept, so I wanted to use my old Flash brain and just grab them all as it happened at the four second mark... Maybe I am way off here, but I felt like I was super close. Feel free to bust chops and make fun of any of my egregious mistakes. AND THANKS for anyone helping out. // Create my saved effect to apply later // register the effect with GSAP: gsap.registerEffect({ name: "blaster", effect: (targets, config) => { return gsap.to(targets, { duration: config.duration, opacity: 0, scale: config.scale, rotate: config.rotate }); }, defaults: { duration: 2, scale:1.5, rotate:135 }, //defaults get applied to any "config" object passed to the effect extendTimeline: true, }); // using the dots array from other tutorials for (i = 0; i < 10; i++) { dot = document.createElement("div"); dot.setAttribute("class", "dot"); bg.appendChild(dot); dots.push(dot); } // fountain of dots pull directly from tutorial on GSAP about PHYSICS2D let tween = gsap.to(dots, { duration: 5, physics2D: { velocity: "random(900, 1200)", angle: "random(-85,-100)", gravity: 500 }, delay: "random(0, 3)" }); // Put a blaster effect on to each "dot" in the array // and apply the options to them from the blaster object created inside the loop // then have those go off 4 seconds into the animation, right? dots.forEach(function(element) { gsap.effects.blaster(element, { duration: 5, scale:"random(1,2)", rotate:"random(0,720)", delay: 4 ///// <-- This is where I want the blaster to occur in my brain???? }); });

Hello Zach! Great responses here. I am brand new to greensock, and so far it's like an angel sent from heaven!! hahah. I am trying to recode a project I did in Jquery that got choked down in the animations and very excited to see how the greensock changes things! Question - If I was coding a game where users input responses... and a fountain burst for them like in this "do it on the canvas" discussion way, would you suggest the CANVAS for that as well? I anticipate what will be happening is the database calls will tell the page HOW MANY shapes to draw on the page (on a constant basis), then the GSAP will animate those DRAWN objects as they hit the page right? Versus a static loaded page that would draw them all once upon loading the page. Person A hits their button... Page X on a websocket is told a new response came in and therefore triggers a script that DRAWS 5 shapes, which when completed triggers the animation GSAP script... sound like I have it covered? Just making sure I don't take the time to learn CANVAS fundamentals yet if I will end up reading later that since it's all dynamically being draw or created it should have been in the DOM... I assumed as I read this thread that it was PERFECT for Canvas. Thoughts? AND THANKS for the incredible website and support etc...