jh-thank-you

I will update this original post with the latest info as everyone shares their approach/technique: GreenSock Community, I just wanted to reach out and see what others are doing to help the animation speed/repaint/performance... I am pretty new to all this so I'm not sure what the best approach is... also as I search for solutions, sometimes, I find that I am starting to follow something that is not considered the best/latest approach. Here are some of the links I am currently looking at for information: See Below: If you have any other good reads/tutorials/ approaches I could learn from it would be much appreciated. All the best, ------------------------ Here are the latest links: ------------------------ BoostR - javascript utility for preconnect, preload and prerender - gitHub last commit 2 years ago Preload: What Is It Good For? - Smashing Magazine Post - 2016 ------------------------ Animation Performance ------------------------ animation with images - GreenSock Forum Post - codepen here Animating an image series *** Telling GSAP to preload animation properties *** Use the progress() method: https://greensock.co...neMax/progress/ -------------------------------- Spritesheets ------------------------------ Spritesheets - look at PIXI - http://www.pixijs.com/ Optimize spritesheets - TexturePacker https://www.codeandweb.com/ ------------------------------- Image Loading ----------------------------- PreloadJS PreloadJS LoadQueue Class Tutorial Preload Images : Image Gallery / SlideShow with GSAP Tutorial Imagesloaded jquery plugin tutorial from Petr Tichy - https://ihatetomatoe...loading-screen/ Imagesloaded demo http://codepen.io/mulegoat/pen/Zeyeoa ---------------------------- Image Optimization -------------------------- *** ImageMagic *** ( Will update after I research more) Imagine, GraphicsMagick or ImageMagic (similar solution to a service like Cloudinary without the expense - Note your hosting provider needs to allow command line tools ) For others reading this make sure to look at the Security Policy that should be implemented: https://www.imagemag...php?f=4&t=26801 https://www.imagemag...pic.php?t=29588 Here is Smashing Magazine Article about settings that will produce smaller and/ better quality images than Photoshop's settings: https://www.smashing...th-imagemagick/ *** TinyPNG*** http://tinypng.com/ *** pngOUT *** Ken Silverman's Utility Page http://advsys.net/ken/utils.htm OSX and Linux Ports http://www.jonof.id.au/kenutils *** ImageOptim and ImageAlpha by Kornel Lesiński *** https://imageoptim.com/mac https://pngmini.com/ comparison to other utilities - http://jamiemason.github.io/ImageOptim-CLI/ CLI -version https://github.com/JamieMason/ImageOptim-CLI ***jpegMini*** http://www.jpegmini.com/ ------------------------------- Caching Assets - CDNs ----------------------------- CDN that specialize in images - Cloudinary. CDN explanation and how-to video for Cloudinary https://www.youtube.com/watch?v=_lQvw2vSDbs Good article on caching other stuff using service workers. https://developers.g...15/11/app-shell Also, if you're loading a bunch of images, you might want to wait a little before you start animating. You can defer your animation by calling a function using setTimeout or requestAnimationFrame. Notice how this logs out B then A. http://codepen.io/os...40?editors=0011

GreenSock Community, I hope all is well. The ISSUE - Global Var not being Passed to local onComplete - onStart etc. Has anyone else experience this issue? Or is it something I am doing wrong? See below. It's not a GSAP issue, as far as I can tell... I created a simplified Codepen using just jQuery for testing. Here are the links: Codepen with GSAP - https://codepen.io/jh-thank-you/pen/pedXxO Codepen without GSAP - https://codepen.io/jh-thank-you/pen/QpaWbg Snippet from my Stack Overflow post: Thanks for any help/advice.

Blake and Dipscom, I hope all is well. A few more steps in the right direction... here is the latest http://hainis.net/dev/index.html I have added a Preference and Contacts section/Tab at the bottom I added visibility filters based on class names using Isotope for it's filtering capabilities http://isotope.metafizzy.co/ I have added local storage to the Preference Tab checkbox form - it stores the form values and passes them on to the next djax/ajax page load so the preference/filters are persistent across all page during a user's visit to the site. I posted a how-to on the Isotope GitHub page: https://github.com/metafizzy/isotope/issues/1236 If you click on Print then Bayer client work (lock image) thumbnail a password overlay will display - enter the correct password "BigPharma" and it will launch the client work overlay modal with the Bayer work - if you enter an incorrect password it will cycle through several response messages Only the Print > Advil and Print > Bayer Thumbnails are operational. Next steps Sort the performance issues (duplicate event handlers on the same DOM elements? Clone being created multiple times. Other... need to learn a DRY approach... need to learn how to modularize the code). Sort the IF/Else Conditional statement only working on first run through with the Password Modal. SOLVED Create the Video Modal All the best, Jim

As always, thanks Blake! With the Slide/Modal you helped me with I am loading three images and using a crossfade to make the illustration build to the final image... Should I think about using the sprite approach? I'm thinking it is one http request instead of three but they are larger images... not sure if I really gain anything performance wise. Click the thumbnail to see the animation (this is an early version not the fixed version): http://codepen.io/jh-thank-you/pen/MJxNEJ

Kreen, I'm glad you found that example helpful. ProWeb, Looking under the hood of your reference site... you can see they are using ScrollMagic, parallax, responsiveslides etc in their JS. Petr Tichy has several great blog posts (with CodePen examples) about working with GSAP and ScrollMagic https://ihatetomatoes.net/blog/ I have forked the GSAP example, moving (and styling) the nav to the right side of the browser window: http://codepen.io/jh-thank-you/pen/aJbVwY I hope that gets you going in the direction you are looking for. All the best,

Thanks Jonathan for the extra info.

Anyone have experience with using the products from https://www.codeandweb.com/ https://www.codeandweb.com/texturepacker is it worth the price? https://www.codeandweb.com/store/texturepacker-single Thanks.

I found this GSAP Slideshow CodePen to be very helpful with this: http://codepen.io/bassta/pen/kDvmC Hope that helps. All the best

Blake, If I am understanding things correctly: The Height and Width are calculated from the top left corner and the origin position is set/calculated from the top left corner to start with in my original approach. Then by adding the xPercent -50% and yPercent -50% to achieve the center position I am changing the origin position throughout the tween which makes the path appear curved/hooked. Your method stays with the top left as the origin point for the entire tween which results in the straight tween path. This top left point is determined by your calculation of the final size of the div in relation to the window size. var x = centerX - rect.left - cloneW / 2; var y = centerY - rect.top - cloneH / 2; Is that correct interpretation? Thanks again.

GSAP Team, I have forked Blake's CodePen and added in the necessary calculations (taking scroll amount into consideration) for the final centering position. Here is the CodePen Link: http://codepen.io/jh-thank-you/pen/QpLJGK?editors=1111 This seems to be smooth (no jank) as it does not use scale, it uses the Height and Width properties. Thanks again Blake for pointing me in the right direction. All the best,

Blake and Jonathan, Thank you for taking the time to respond. I did notice the jank... just didn't know what to do to get rid of it... I was just happy that I got the tween path to be straight. I will definitely add these tips to my notes. So what is considered the best practice way of solving this... or is it they are all acceptable, just be consistent throughout project? Does one approach have better performance vs another? I noticed in Blake's CodePen he is using parseFloat(); I found this in the forum about decimal percentages with zeros at the end of the string causing animation issues (hope this helps another newbie out): https://greensock.com/forums/topic/11133-problem-animating-decimal-percentages/

Dipscom, Blake, GSAP Community, Here are two simplified versions of the modal, they are a fork of Blake's Responsive Grid CodePen (no ajax calls or extra CSS etc.). Each CodePen has it where if you click on any of the divs in the grid they will scale up and to the center of the browser's window. Each div will also scale back down when you click on it (or the background overlay) a second time. This version uses the Height and Width properties to calculate the div size based on a percentage of the browser's window width: http://codepen.io/jh-thank-you/pen/wgVLgW Note that this version follows a curved path (the issue I am looking to solve) as the div scales to center. Here is a animated gif, I have added a start and endpoint, red outline boxes, so you can see how the div moves right then back left towards the center as it scales up (as if transform origin is top, left). I tried Blake's suggestion of changing the transformOrigin but it did not work: using-height-and-width-to-scale.gif This alternate version uses GSAP's Scale property to to calculate the div size based on a percentage of the browser's window width: http://codepen.io/jh-thank-you/pen/GrVbWJ Here is a animated gif, showing the GSAP scale property. It also has the start and endpoint, red outline boxes. Notice how the scale (transform origin) method is applied from the center of the div. This results in a straight line path vs. a curved (hooked - for the lack of a better term) path: using-gsap-scale-to-scale.gif I believe there is a forum article that discusses this issue but I have been unable to find it again. For what it's worth I hope this helps someone else out. All the best.

Dipscom, Thanks for the follow up. Sorry for the delayed response, its been a busy day, I had to switch gears to a client project. I will be sure to post an updated CodePen in a few days. Thanks for the kind words, have a great day/evening. All the best. PS I wanted to add I can't agree with you more about "The world just need us all to be nice."

Simplified CodePens: Modal Overlay - no bkg - clone scales - simplified - width 100% Modal Overlay - no bkg - clone scales - simplified - using GSAP scale

Dipscom, Thanks for the help. While you were posting I was sorting out the other couple of CodePens that I just posted above. I will cut them down and post back. I will definitely pass the kindness forward... on the coding front my abilities are limited... but I have been looking at the forum questions every so often to see if there is something I can help with. On a pass it forward line of thought, for the last ten years I have been running a nonprofit that teaches martial arts, for free, to the kids and families in the community. H.E.A.R.T. Martial Arts is run out of Newark, NJ. If you are ever in the North Jersey area reach out, it would be great to meet and thank you in person. Thanks again. P.S. My next web project will be for H.E.A.R.T. ... the site is an old, but free, google geosite.

Here is the latest link for the Modal Modal Overlay - clone scales to center - arc path This sorts the clone start position by removing the CSS padding at the start of the tween and adding a new class (clonePadding) onComplete. For any other newbies, like me, this CodePen is now using dynamic links to bring in the appropriate images: I figured out how to make a dynamic link to bring in the appropriate image based on a URL link generated from the selected element's ID... this helps by making one set of functions that can now be used on the entire page's thumbnails to load the appropriate set of images into the modal's first slide (this is how the cross-fades/image stage is achieved). As for the arched tween path, I am still using "100%" or "100vw" for the "to" target size. If I use the GSAP "scale" property the tween path is a straight line but I'm having positioning issues with the CSS (I'm still trying to sort what is the source of the problem). The CodePen Link below uses the "scale" approach with a formula for the target size, but I have not fully sorted out all the issues with the final, centered, position (trying to sort the max scale amount padding etc.): Modal Overlay - clone scales to center - using scale

Thanks Blake, Tried it but no go... if I don't use width and height to change the size, using scale instead, it seems to get rid of the issue. That said, if I use this approach I can't use 100vw as a target end size as CSS scale does not take that kind of unit measure... have to figure out another way. Will update when I make some progress. Thanks again, enjoy the rest of your weekend. P.S. Let me know a good day to order in a lunch for you and Dipscom (pick one of your favorite delivery places... let me know know what you want and a good delivery time).

Blake, Thank you for the help, I really appreciate it. Here is a fork without any scaling applied to the clone: http://codepen.io/jh-thank-you/pen/BpqOBW Note: I figured out one part of the issue, the CSS for padding on the clone, that is in the style sheet, is being applied too early in the tween... I'm solving this by adding a class name onComplete. This takes care of the clone being made smaller before scaling up. I added a red boarder to the clone, you can see the start position is set correctly (just like your Responsive Grid CodePen). http://codepen.io/jh-thank-you/pen/KaGGEV: In this pen I have the clone scaling, hopefully without the background (and slowing it down / 3 sec duration) you can see how the clone moves left then back to the the center instead of directly towards the center. I believe this is due to the rendering/calculation order... I have been looking for an older Forum thread I read on this... someone else was having a similar issue. I think it was talking about Height & Width calculations vs Scale / Transform Translate methods rendering orders and how that can throw things off. Thanks again for the help, also thanks for the likes on the other post, you and Dipscom have been so helpful... Do you guys work out of the same office... can I order in a lunch for you guys? I would like to do something a little extra for both of you... Both of you have gone above an beyond.

GreenSock Community, Thanks for taking the time to read this post, also thanks in advance for any help you may provide. I have a modal that scales up a selected thumbnail into a scrollable slide container. Please note the CodePen only has the "Advil" link set to call in Ajax content (HTML and JS) from another CodePen Ajax-Modal-Content I have two problems with the Tween Path: The starting position does not seem to be the correct coordinates, despite my using that part of the code exactly as what the original example is using (see getPosition function and the rect var). I'm having an issue with the path animating on an arc (curved path). I think this is due to my using Top 50% and Left 50% along with transform/translate to center the image within the browser's window)... I seem to remember reading somewhere in the GSAP forums that this is due to the rendering order... that Top/Left/Right/Bottom are calculated last... if this is true, do you have any suggestions on how to center the image within the browser's window and solve this render order issue? The modal is based on a CodePen by one of the GreenSock Moderators (thanks again Blake for all the help Responsive Grid ). Also,the slide container is based on another GreenSock Community Member's example (thanks Chrysto http://codepen.io/bassta/pen/kDvmC). I have made the main part of the tween set to 6 seconds (slowing it down) so you can see how the starting position is off and how the top and left calculations happen at the end. Thanks again for any help/guidance.

Dipscom, Thanks for the feedback. Yes, I feel the same way with the complexity. It's part of the reason why I started to break the scripts up and only load what is needed for each section; one script loads for the section content then another loads for the modal. Still, I feel I can break it down even more, I will chip away at that at a later date, for now I want to get everything working then see how I can streamline it. I do have some performance questions, once I'm done doing a bit more research I will post them as separate topics. Thanks again for your encouragement, both you and Blake have been so gracious with your time and expertise, I really appreciate it. I will be sure to follow up with the final site. All the best, Jim

Blake & Dipscom, I hope all is well, I wanted to share my progress so far... there are still rough patches (sorting and learning as I go). Below is a link to the current dev site. Note, the Print / Advil is the only path that is fully sorted... you can still load the other sections but the client work and modal for each is not set yet. My next steps are to: Sorting a script for dynamic link loading of the animated first image set within the Modal - basing this on att id. Sort some spacing issue at small sizes for the Modal Slides Create an alternate large screen presentation taking advantage of the Marker Pad, Graph Paper, Napkin and Envelop as part of the animation for the Modal also on large screens the the thumbnails will go away/be replaced by hand drawn names and doodles that will go on other side of the Section Hero Image (Marker Pad etc.) Create a preference panel where visitors can choose industries that interest them, then only be presented those industries throughout their visit on the site (cookies and forms?). Prepping the rest of the image content for all the client work. Creating a locally running option for a Tablet ( Any suggestions on which way to approach this?) Thanks, as always any suggestions or guidance is much appreciated. All the best, Jim Here's the link: http://hainis.net/dev/index.html

Blake & Dipscom, I wanted to wish you both all the best for the holidays, safe travels, good health and happiness for the new year! All the best, Jim

Wanted to add this link for AngulaJS 1.5.x and Foundation 6.2.3 https://circlingthesun.github.io/angular-foundation-6/ Thanks Blake for the Plunker example.

Learning best practices as I go... thank you for the advice... I agree with your approach/what stackoverflow said... will update the code accordingly.

Blake, Thank you!!!! By getting me to go back in and look at babel again, the browsers threw the errors again, but this time I dug a little deeper... Even though I had no errors in several browsers prior to babel, the errors that came up were to define variables... due to my not using commas in a list and for not defining some variables on the global level. Yeti now compiles everything and Safari/ Xcode iOS simulator does not show any errors, also the display issues went away/GSAP display properties are working! Thank you again... a fresh set of eyes and advice from you are a big help! var configWidth = "150px"; var configHeight = "125px"; var configScaleWidth = "90vw"; var configScaleHeight = "90vh"; var configScaleLandingWidth = "500vw"; var configScaleLandingHeight = "500vh"; var configRatio = .7;