Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jh-thank-you

VueJS and GSAP - Making Components

Recommended Posts

GS Community,

 

I am in the process of rebuilding a GSAP website into a Vue.js project.

 

I am in the  very early stages of learning Vue, here is a good, free, video series and here is a very good (but it cost 10 dollars) Udemy course.

 

My hope for this thread is to build out a full GSAP & Vue App. I will break out each component as I go and place it in a codepen (I have quite a few things done already, it will take me some time to go back and break things out). This will be a work in progress and the codepens will be updated in phases: 

  • Phase 1: will be to get just get things wired the Vue way.
  • Phase 2: will be to use GSAP for the animations and transitions etc.
  • Phase 3: Build everything as dynamic/reusable components. If all goes well this will turn into a Vue/GSAP component library of sorts for everyone to reference.

 

Blake, one of the GreenSock Moderators, has graciously offered to help guide me (Thank you Blake). 

 

Goals for the thread/project:

  • Navigation Button Component
  • Section Content Component
  • Section Hero Image Component
  • Section Thumbnail/Modal Button Component
  • Modal Component
  • Password Modal Component
  • Vertical Slideshow Component (I will also to help others build out a Horizontal Version).
  • Slide-up Tab Component
  • Radial Button/Checkbox Form
  • Filtering based on a sector/classname (with persistence via local storage or a Vue method, if it exists - learning as I go )

 

All of the above is built in a non-Vue way here http://hainis.net/dev/ 

  • Note: that only the print/advil, print/amex, print/bayer slideshow content is sorted, all the other thumbnails will load a blank modal.

 

This site has performance issues and at times the javascript, loaded via a Djax call, for the thumbnail buttons to launch the slideshow content is not binding properly.  These issues and some prodding by Blake have made me venture down the Vue.js path.

 

Side note: I'm learning, not there yet, to do things a DRY way; hopefully under Blake's guidance I will finally get this under control and tighten up the spaghetti code that I currently have.

 

Okay, so that's the setup. Next post will be some useful links and a current state/NOT simplified codepen of the current Vue app.

 

 

See the Pen kDvmC by bassta (@bassta) on CodePen

  • Like 1
Link to post
Share on other sites

The navigation will be based on what was built from another thread I started Animating Object to Center of Window & Scale Based on Window Size Percentage. A number of GreenSock Moderators contributed to this thread (Thanks again Blake and Dipscom).

 

The slideshow I have is based on a great, responsive, slideshow by Chrysto 

See the Pen kDvmC by bassta (@bassta) on CodePen

 

My next step will be converting my local build to a codepen or plunker (Blake, this will take a bit of time to do - I will hopefully have it ip by later today/Saturday).

  • Like 1
Link to post
Share on other sites

Blake,

 

Sorry for such an early reach out for help, I just spent the last 2 plusl hours trying to sort this error.

 

"Failed to load resource: the server responded with a status of 400 ()"

 

SOLVED: for some reason the existing demos from The Definitive Guide to Compilation on Plunker with babel processing work without specifying the script type but with the new plunker I created you need to specify the script type, otherwise it throws the error above:

 

// this will throw an error 400

<script src="main.js"></script>

// this will not

<script type="script" src="main.js"></script>

 

 

I have everything uploaded to plunker here is the link: https://plnkr.co/edit/PLbg0VFNNlhAcIgWsowD?p=preview

 

So it looks like plunker does not recognize .vue file types or am I wrong? Codepen projects/pro looks like it should work but I'm having issues as well (I have an email into support as Chris Coyier mentioned on the project page .vue files are supported) .

 

 

Thanks for any help you may provide.

 

All the best,

Jim

Link to post
Share on other sites

No luck with .vue on Codepen despite Chris mentioning that they are supported... Chris actually suggested to another user to reach out to author of the CSS-Tricks Vue series you pointed me at... I reached out to Sarah, she is going to look into it when she gets back from a conference next week-ish. I have not heard back from the codepen team yet.

 

I could rebuild everything to be codepen compliant, but I rather keep all structured the way I have it if possible... since that seems more real world... reading Sarah's post her comment is:

 

// The code is a little different in codepen, if you'd like to see the setup that's more true to real-life, it's in this repo: https://github.com/sdras/vue-weather-notifier
//I had to change a bunch of things around to use vuex in one script tag, most notably that this.$store became just store 

 

but I was hopeful as codepen projects looks like a recent addition... I will checkout webpackbin.

 

Thanks.

(hamster on a wheel graphic here) 

Link to post
Share on other sites

No go for Vue in Codepen Pro, just got this from the codepen team

 

Quote

Thanks for writing in! The Projects beta initially shipped with nominal .vue support, but we've since removed it because it was not working as expected. We hope to bring it back in better working order soon.

 

Webpackbin is working. I'm slowly rebuilding/simplifying everything, using this opportunity to rework everything. 

  • Like 1
Link to post
Share on other sites

SOLVED - Thanks to Juho (Webpack Contributor) and Evan You (Vue Creator/Contributor)

The GitHub Repo and the GSAP Webpack Config Post have been Updated.

 

Note: Webpack Aliases are not being honored in Vue Template files despite being prefixed with a tilde ~. I have posted a reply to Evan You's commnent, hopefully he will reopen issue #814 and investigate further. The current build has a workaround but I am hoping to find out if it is the preferred way of handling the issue.

 

Continuing on the Webpack hamster wheel...

 

I have vue components loading into a slot dynamically but all the hard coded image links in the component are not being processed (neither the images or the links). I used Copy Webpack Plugin to get around this but I'm having issues with that too.  Juho (one of the webpack contributors) was helping me sort the css path issue in the webpack config, he thinks there may be an issue with vue-loader. In any case, I posted in issues on vue-loader's github page. If/when I figure this out I will share the info.

 

vue-loader's github page:

https://github.com/vuejs/vue-loader/issues/814

 

There is an issue with using Copy Webpack Plugin, details found here:

 

Here is a github repo:

https://github.com/jh-thank-you/webpack-w-gsap

 

 

  • Like 1
Link to post
Share on other sites

Updated the repo.

 

Solved having to make individual import statements and component registration for each modal's slideshow content - based on the Event Bus data - see the getModal() function in modal-slideshow.vue file.

 

Here is a github repo:

https://github.com/jh-thank-you/webpack-w-gsap

 

Next steps:

  • Build out a simplified webpackbin of the project.
  • Figure out how to dynamically set the hero image for each section instead of hard coding it (currently the print section has a hard coded hero image).
  • Need to wire up the preference/contact's tab the Vue way.
  • Research/recreate the preference settings form that sets up the viewing preferences based on sectors/and/or classnames (need to figure out the Vue way of doing the form and having the preferences persist across page loads with local storage). 
Link to post
Share on other sites

Updated the repo.

 

https://github.com/jh-thank-you/webpack-w-gsap

 

GSAP Animation (only modal-slideshow has GSAP animations applied but not in a Vue way - using jquery - Should I try and accomplish this without jquery?):

  • Tweenlite
  • CSSPlugin
  • ScrollToPlugin

Simplifying the Build:

  • Cleaning up the CSS
  • Cleaning up the HTML 

Nav Buttons Component:

  • Vue-Router with routes for Print, Video, Outdoor and Online.

Section and Hero Image Component:

  • Each Section (Print, Video, Outdoor and Online) has duplicate code - need to research how to have the props update along with the corresponding examples-list dynamically based on the nav button clicked. Need/Trying to make this part DRY.
  • Cleaned up CSS grid.
  • Hero image data is passed in by an eventBus - ISSUE - the section nave/section button loads the Hero Image on second (or more) load of the section (for example: click on the PRINT Nav button the first time and the Hero Image will not load, close out and click on PRINT Nav button again and the Hero Image loads. Need to figure out why the eventBus data is not working on first load. I'm thinking this has to do with the hero-image.vue component registration not being detected before the data is updated. I tried moving the data update to mounted() vs. completed() but this did not solve this issue (based on a Vue forum suggestion).

Modal Buttons Component:

  • Section thumbnails will call up a Modal Overlay (not accomplished by a sub-route - sub-routes may be a better way - need to research).
  • Event Bus passes modal-button ID to modal-slideshow which in turn calls in the appropriate component.

Modal Slideshow Overlay Component:

  • modal-slideshow listens for Event Bus change and loads the appropriate Vue Modal file. 
  • Solved having to make individual import statements and component registration for each modal's slideshow content - based on the Event Bus data - see the getModal() function in modal-slideshow.vue file.

Preference & Contact Tab:

  • Placeholder for now.

 

Next Steps:

  • Need to solve Hero Image Event Bus issue.
  • Build out and wire up the password modal.
    • Need to figure out how to alternately load the password modal for buttons that contain "locked" in the sector data (v-if approach?). In non-Vue version of site I'm using jquery .hasClass: 
      if ($(this).hasClass("locked"))

       

  • Need to solve how to sort visibility based on Vue filters ( filters based on the sector data applied to each modal-button).
  • Apply localstorage to filter set.
  • When all of the above is accomplished it will be time to incorporate GSAP for the the transitions etc.

 

 

 

 

  • Like 1
Link to post
Share on other sites

SOLVED: the Hero-Image issue (thanks to Blake guiding me and jarring my brain)

Solved by passing props via vue-router - IMPORTANT the Prop has to passed to the component's Parent (see comments in the section.vue file).

Having a hard coded ID/data in the routes prop has some benefits vs dynamically changing the prop based on the eventBus data:

  • Setting the ID of the parent element via routes, then binding the class value of the hero-image to the parent ID helped to simplify things.
  • I was then able to remove the logic to set the class of hero-image divs during the created hook...
  • Then I used more explicit CSS for the hero-image divs - set the base image and the animated Gif.
  • Added benefit... now if someone bookmarks the page / comes directly to the page the proper images show since the class assignments don't rely on a click event! Whoo-hoo!... Okay that was lame but hopefully you are laughing with me.

I have to DRY up the section.vue component code: 

  • I need to figure out how to load in the appropriate content based on the ID prop's value.
    • Maybe a Dynamic Slot - similar to what I am doing in the modal-slideshow.
  • Prior version (see git tag) each section was a separate .vue component that in turn loads a separate example-list file.  

 

Some useful links:

https://router.vuejs.org/en/essentials/passing-props.html

https://github.com/vuejs/vue-router/tree/dev/examples/route-props

 

Todo:

  • Dry up the section.vue component code (see notes above).   DONE
  • Add preference and contacts tab.  DONE
  • Create the password modal the Vue way.  DONE 
  • Create Small Nav Menu.   DONE
  • Figure out filtering in Vue 2.0 (filters from 1.0 are deprecated) - Also Apply some kind of storage for across page load persistence.
  • Add GSAP animations/transitions etc.

Updated the repo, here is the link:

https://github.com/jh-thank-you/webpack-w-gsap

  • Like 1
Link to post
Share on other sites

Updates:

  • Preference & Contact tab: Added logic for industry selects/checkboxes (Default and Select All). Thanks to Sven over at Gitter/Codepen (https://codepen.io/svevil/)
  • Preference & Contact tab: CSS updates (media query tweaks) and repeating background image added.
  • Preference & Contact tab: Added localStorage for selects/checkboxes - persistence across page loads.
  • Preference & Contact tab: Added basic (Vue Transition) CSS animation for opening/closing tab/overlay.
  • Password Modal: 
    • Added basic (Vue Transition) CSS animation for opening/closing the modal
    • Added basic (Vue Transition) CSS animation between wrong password entered messages.

Todo:

  • Use GSAP to animate transitions vs. CSS.
  • Add transitions from main menu to section pages.
  • Add transition to modal-button (from modal-button to slide image).
  • Add transition to locked modal-button when correct password is entered (hide password modal then transition from modal-button to slide image).
  • Rebuild GSAP slideshow the Vue way (currently built with jQuery).
  • Filter modal-buttons based on Industry Selects.
    • Need to pass checkbox select Array to section page.    DONE
    • Need to figure out how to filter the current v-for="select in selectsArray" based on the checkbox array.   DONE
    • Thanks Sven for al your help with the filter! - https://github.com/svevil
    • Add CSS animation for filter results DONE

Updated the repo, here is the link:

https://github.com/jh-thank-you/webpack-w-gsap

  • Like 1
Link to post
Share on other sites

 

 

 

 

 

Link to post
Share on other sites

SOLVED - Chrome bug when using mix-blend-mode: multiply;

https://bugs.chromium.org/p/chromium/issues/detail?id=503638

 

Latest Chrome release breaks things... visibility issues with <modal-slideshow> content
Dev Tools show everything is set properly but the DOM elements remain hidden. 
Any thought or suggestions on how to troubleshoot this would be very welcome/appreciated:

https://files.gitter.im/vuejs/vue/g3ep/screencapture.gif

Link to post
Share on other sites

I finally have the Vue app at a point where I am starting to add transitions and animations:

  • I am picking apart the CSS-Tricks Vue Series to see how they are triggering the GSAP animations.
  • I am also wondering/thinking about rebuilding the jQuery version of the slideshow in a more Vue-like way.
    • This is a deeper dive for me as I'm getting decent at being a parts changer (swapping out bits of code) but I have to be honest I have a lot to learn as far as javascript basics go.

Here is the repo link:
https://github.com/jh-thank-you/webpack-w-gsap
Note: only Print/Advil, Print/Bayer, Print/Amex have modal content to load. 
 

All the best,

Jim

Link to post
Share on other sites

Basic transitions and animations added.

Todo:

  • Build gsap/vue slideshow.
  • Add gsap animation for nav-buttons
  • Add gsap animation for slideshow modal-button to slideshow transition.
  • Replace some (maybe all CSS transitions) with Vue javascript hooks with gsap.
  • Create a video player and or YouTube/Vimeo embed.
  • Final phase: Upload all artwork / graphics / videos to new site! COMING SOON (hopefully).

 

Here is the repo link:*
https://github.com/jh-thank-you/webpack-w-gsap

 

here is a live dev site:*

http://hainis.net/dev/vue/

 

*Note: only Print/Advil, Print/Bayer, Print/Amex have modal content to load. 

Link to post
Share on other sites

Wanted to share this Vue JS Slideshow that was created by Tim Rijkse (Thanks Tim for sharing... you saved me hours of work... now If I could just fix this Chrome blur bug all would be right in the world :? ).
 

See the Pen ALgZpp by timrijkse (@timrijkse) on CodePen

 

  • Like 1
Link to post
Share on other sites

Just built my own version of a basic Vue Js with GSAP slideshow, see pen below.

I am looking to add swipe and arrow key events to this in a Vue/state management way... I'm still getting my head wrapped around having data do the driving... If someone can point me towards a good example of how to bind these types of events the data/Vue way it would be much appreciated.

I hope my pen and other links/info will help others.

 

See the Pen yXrMdp by jh-thank-you (@jh-thank-you) on CodePen

 

 

Inspired thinking by:

  • Like 1
Link to post
Share on other sites

Below is a codepen of a basic Vue <transition-group> example:

You could easily use Vue's JS hooks to animate the transitions instead of Vue's transition classes... this is where you would tap GSAP to take over:

In your HTML/Vue Template within the <transition> element:
 

// use v-bind:css="false" to tell Vue to ignore CSS trabsition classes and use JS hooks instead
<transition
  v-on:enter="enter"
      v-on:after-enter="afterEnter"					
      v-on:leave="leave"
      v-bind:css="false"
>
  <component v-bind:is="currentSelect" class="current-slide"></component>
</transition>

 

in your JS/.vue component connect GSAP through Vue's JS hooks (functions/methods):
 

methods: {

  enter(el, done) {
      const tl = new TimelineMax({
          onComplete: done
      })

      tl.set(el, {
          x: window.innerWidth * 1.5,
          scale: 0.8,
          transformOrigin: '50% 50%'
      })

      tl.to(el, 0.5, {
          x: 0,
          ease: Power4.easeOut
      });

      tl.to(el, 1, {
          scale: 1,
          ease: Power4.easeOut
      });
  },

  leave(el, done) {
      TweenMax.fromTo(el, 1, {
          autoAlpha: 1
      }, {
          autoAlpha: 0,
          ease: Power4.easeOut,
          onComplete: done
      });
  }

}, // END methods


 

See the Pen xrYbpN by jh-thank-you (@jh-thank-you) on CodePen

 

Link to post
Share on other sites

Here is an updated Vue-GSAP - slideshow pen, it features:

  • GSAP for the main transition.
  • CSS Vue Transition classes for the Previous and Next Buttons.
    • When you reach the end or the beginning of the show the the Previous or Next Button will fade out.
  • You can also use the Left and Right arrow keys to cycle through the slides.

 

See the Pen gRJEpW?editors=1111 by jh-thank-you (@jh-thank-you) on CodePen

 

  • Like 1
Link to post
Share on other sites

This has been a very long time coming. I added swipe (touch events to this slideshow) it is based on the google dev's article:
 https://developers.google.com/web/fundamentals/design-and-ux/input/touch/

Note the code needs to be cleaned up and there are a few things I would need to do to make it DRY. For the sake of helping others here is the codepen:

See the Pen arevVB?editors=0110 by jh-thank-you (@jh-thank-you) on CodePen

  • Like 4
Link to post
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.

×