Jump to content
Search Community

Animating Object to Center of Window & Scale Based on Window Size Percentage

jh-thank-you test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

  • 3 weeks later...

That's pretty funny. I remember reading that last year, and here we are a year later, and the situation has only gotten worse. Just ask @Dipscom. He had the pleasure of learning Create React App, which is supposed to make creating React apps easier.  :roll:

 

And I was going to respond to your previous response, but got sidetracked. I was going to tell you that I didn't setup that movie list demo to handle reloading persistence, but it's really easy to do. Local storage works, but the recommend way now is to use IndexedDB and service workers. Yay! More stuff to learn in 2017!

 

The idea is to build your app so it can still function offline. Here's a good article about that. It's the same one I posted in your other thread about preloading animations.

https://developers.google.com/web/updates/2015/11/app-shell

 

And for even more persistence, you should look into using Firebase. It's a real-time database, and lets you build serverless apps. What's a real-time database? Open up this demo in 2 different windows, and you'll see...

See the Pen gPeeJN by osublake (@osublake) on CodePen

 

Another thing I was going to show you is how complex filtering is possible. Here's another version of that Street Fighter demo with some additional filters that can be toggled in ascending/descending order. I also added some simple animations.

See the Pen 61d07e989aec68840bc7fa7652f1f40b by osublake (@osublake) on CodePen

 

The filters are declared after a pipe symbol (|), and there are bunch of built in ones.

<div class="eachCharacter" ng-repeat="character in vm.data | filter:search | orderBy:vm.propertyName:vm.reverse"></div>

Most of syntax in Vue is taken from Angular, so filters work the same way.

https://coligo.io/vuejs-filters/

 

One cool thing Vue has built in are flip animations. Have you seen this Sudoku example? Filters and easy flip animations kind of make using Isotype pointless.

https://jsfiddle.net/chrisvfritz/sLrhk1bc/

 

As for how to make your code more modular. I wrote this other day...

https://greensock.com/forums/topic/16290-javascript-intermediate-and-advanced-learning/?p=71932

 

But if you're using Vue, you're already doing the same thing with components. The only difference is the syntax and that Vue automatically creates the objects for you. 

 

.

  • Like 2
Link to comment
Share on other sites

Blake,

 

As always, thank you so much for such a thorough/informative answer.

 

It's a lot to take in, I will be sure to read through the links/examples.

 

localStorage vs indexDB - if I want to eventually build this out as both an online and offline portfolio viewer with filter persistence is one approach better vs the other for my use case? 

 

Isotope filtering - I actually set isotope up so it doesn't use it's layout/animation system, I'm only using it's filtering capability. Thank you for the link on Vue JS filters. I'm going to see if I can learn/figure out how to replicate just the filtering and get rid of Isotope/extra weight. 

 

Vue.js + Webpack + GSAP: I have almost completed Vue.js tutorials and Webpack book, here are some links to help out others:

 

https://laracasts.com/series/learn-vue-2-step-by-step

https://survivejs.com/webpack/preface/

 

I have just started to rebuild things in Vue.js and I am starting to read about all the GSAP/Webpack issues... just scratching the surface on this now... I came across your post about using the CDN for GSAP and adding it as an external. I'm building to load everything locally without any internet connection, so I'm looking into having GSAP stored in the node-modules folder etc. any advice on this approach is much appreciated.

using-npm-and-webpack-to-import-tweenlite

 

Any advice on how to setup Vue.js for my use case? I'm reading about Separation of Concerns:

  • https://www.youtube.com/watch?v=0ZNIQOO2sfA
  • I see the organizational benefit of keeping everything in a Vue instance/module and how this would keep the module self contained... is it better to have the CSS local to each instance/module or is it better to keep the CSS all in one external file the way it is done with a traditional website? 
  • I guess some people would say it's easier to make changes if the CSS is all in one place but I'm thinking it makes more sense to keep it locally with the the Vue Instance/Module. It goes against what I've read is best practice for traditional websites... seems like Mattias, in his video, is showing the shortcomings of this approach.
  • Maybe I'm not understanding how Vue compiles everything just yet. My understanding so far is that it calls and binds things as needed... so if a component with it's scripts and css are not needed yet why load it (initial page loads faster this way) BUT other page loads would be slower since the resource/ additional http requests are being made... Seems like you have to pay the toll at some point... whether to do it all up front or spread the it out is the question for performance. Just thinking things through, looking for validation of an approach.

Thanks again for all the help and advice.

 

All the best,

 

Jim

Link to comment
Share on other sites

Using localStorage or IndexedBD is going to depend what and how much stuff you are storing. LocalStorage is for small amounts of data, and can block the UI. IndexedDB can handle larger amounts of data, and get stuff async.

 

For an interesting look at site made with IndexedDB and other offline capabilities, you should check out Pokedex and the blog post that details how it was made. The architecture is pretty amazing.

http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org

 

And if you're only using Isotope for filtering, you really don't need it. Vue has a bunch of built in filters, there's a bunch of user created ones, and creating your own isn't as that hard. The data for your view model is probably going to be in an array, and arrays have a filter method. In addition to filter, some other methods that might help you out are forEach, map, sort, every, some, and reduce.

 

Here's a simple example showing how to filter and sort an array. Notice how the array methods can be chained together, and don't mutate the original array.

See the Pen 2c762ff80b7870fef99bf203a0e6764f?editors=0010 by osublake (@osublake) on CodePen

 

To load GSAP without the CDN, just link directly to your modules folder. GSAP doesn't need to be built.

<!-- Dependencies -->
<script src="./node_modules/src/uncompressed/TweenMax.js"></script>

<!-- Main -->
<script src="./dist/bundle.js"></script>

For CSS, I kind of followed what the Angular Material team did. Look at how they have CSS in the core folder and for each component.

https://github.com/angular/material/tree/562b1c94d14aa05296da78e6a31bc5a60ea3cc57/src

 

And how stuff gets loaded/compiled by Vue depends on your build. I don't do lazy loading, requesting stuff when needed. I find it much easier and faster to load a larger bundle up front. This will also make your app faster as it doesn't have to wait to load a template, inject the CSS, and compile it. 

 

.

  • Like 3
Link to comment
Share on other sites

Thanks Blake,

 

You are truly gracious with your time and expertise. I am not an expert with coding etc. but there are a few things that I am good at (marketing, art direction and design). If you are ever in need of help with any of these areas please don't hesitate to ask, I would be more than happy to return the favor(s). 

 

Again, thank you for all the links, information and examples.

 

Have a great evening/day.

 

All the best,

Jim

P.S. Same for Dipscom, you gents are both a class act.

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

Blake,

 

I hope all is well.

 

First, thanks for the likes on the webpack config post, I hope what I did helps out someone else.

 

Thanks for pointing me towards VueJS. I have been slowly making my way through a Udemy course on Vue... I've posted a few questions in their Q&A and have looked through the VueJS Gitter forum for an issue I am having (I have had no luck and you seem to be a guru with so many things).

 

I know you are very busy, would it be okay to ask you a Vue question? If so, where should I post it?

 

Thanks.

 

All the best,

Jim

Link to comment
Share on other sites

I'm sure somebody will find your webpack stuff helpful as this is what most people go through.

 

And you've actually helped a lot of people by just asking questions. I can't tell you how many times @Dipscom and I have linked to this topic. At least once a week.

I actually did it earlier today.

 

For your Vue question, just make a new topic. I don't think we've ever had a question directly related to Vue, so it might end up being another good resource. And I saw you had something earlier about ajax. If you need to make a demo that uses ajax, you should use Plunker instead of CodePen. It's setup more like a real site, and has a file system so you can request something in your demo, like I do with the SVGs here.

 

http://plnkr.co/edit/c1cHZKzolHdz6nNEcvtZ?p=preview

 

  • Like 3
Link to comment
Share on other sites

  • 2 years later...
On 10/6/2016 at 5:58 PM, jh-thank-you said:

GreenSock Community,

 

First, thank you in advance for any help you may provide.

 

I am just learning how to use Greensock and web development in general, please pardon any newbie questions.

 

I have put together a CodePen here is what I am looking to achieve:

  • Each corner of the browser has a hyperlink with image for each section of the website. When you click on a section link that section image will move towards the center of the browser window (both vertically and horizontally centered) it will also scale up in size. The remaining section images will move out of the browser window frame (move off stage). This I have working... what I need help with is:
    • Each section image does not center properly. I have tried a couple of things based on some other forum topics found here http://greensock.com/forums/topic/13542-positioning-relative-to-center/ and here http://greensock.com/forums/topic/13802-update-height-value-dinamically-on-window-resize/
    • I would also like to scale the image to about 65% of the browser window width. I tried using the technique mentioned here http://greensock.com/forums/topic/13802-update-height-value-dinamically-on-window-resize/
      • I tried to replace "scale: 3" with "width: '65vw'" in my timeline but that did not work
    • I also noticed that sometimes the image/object does not animate anywhere near the center (sometimes going off screen) a page refresh and clicking the link again will usually correct this behavior but it seems the javascript is not calculating the proper initial window size (thus all the other math is off).
    • Also, is it possible to have the enlarged image (once it reaches its final animated position) be responsive (resize itself at the 65% vw) if the user resizes the window.
      • I tried using the the window resize function found in this codepen 
         but did not have any luck (likely because I was not able to sort the image size based on screen width as stated above).
    • This last question is not a GreenSock question but I figure someone in the community could guide me towards a good article or solution... after the section image is centered I want to dynamically load content below it so the user can scroll down and view the appropriate content/info. I'm hoping to help speed the page load as it will only load the content the user is looking for... I'm off  googling  on this one now but any help will be very much appreciated.

I hope that I have made things clear. Again, thank you for any help you may provide.

 

On 10/19/2016 at 5:29 AM, Dipscom said:

Hey Jim,

 

I am not too sure if you need to set so many things with JavaScript. I am not following why you would want to control the image's aspect ratio with JS. Images have intrinsic image ratios so, you really don't need to be handling that with JS, CSS wizardry will do the trick. 

 

I can see why you would want to control how large the container div gets relative to the screen size but other than that, the feeling I am getting is that you might be going a bit too deep into this rabbit hole.

Thanks for that ... Im workiog on this one now... the images in the grid/mural are randomly placed and because its all classes, I made it all too complicated... anyway, the idea is to click an image and then have that image open up as a card, etc... I did the card animation, but yeah... I'll try that and continue the card animation with masks and as page transitions. Thanks

See the Pen JjdwOZK by Mmaarrkk (@Mmaarrkk) on CodePen

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...