Back in the saddle...

[troymartz]

Ok, ok... So i took a decade off from my original passion (Flash). I followed the money (SEO at the time), and not my heart...

http://studio619.com/testbed/

I was on my way!

Anyway, I never left the web, but was focusing on free-lancing, and not a specific craft--like motion animation. In the last year, I've been called to get back in the UI/UX game, and we are two days away from a soft launch, and boy oh boy do I have some catch-up work to do...

http://minertoken.io/

 

The stack:
 

• Node.js
• Express
• Mongo
• axios
• Nuxt
• Vue
• Vuex
• GSAP
• ScrollMagic

I'm doing pretty good on the modal windows, and the ScrollTo--even the registration probably uses too much of it--but there is just so much more I want to add, and I'm afraid what I want to do does not come in a plugin form...

I'll have to roll my own. The bad thing is that I'm not a real JavaScripter... I'm an imposter. I'm a creative that is dangerous w/ code, but looking to own it w/ projects and extended study.

That may take a year.

In the meantime, this whole "reactive" thing opens up door that are only limited by our imagination.

Maybe I'm a little late to the party, but I've had a series of epiphanies the last few weeks, and it just so happens that GSAP is at the heart of every single "BOOM."

Such a nice approach to JS animation. Had I known about this when Flash died, I never would have left. But now I'm back, and determined to kick some ass on the UI/UX stage.

But I need help... In the meantime.

I'll add these features, one by one, but here is my wishlist:

Smooth mouse-wheel scroll:
 

• I'd love to integrate a smooth mouse-wheel scroll script, and have it know what ScrollToPlugin is doing, etc.
   
• I have a script, but it doesn't play nicely with either Nuxt or ScrollToPlugin??

 

Parallax:
 

• Parallax on that SVG banner...
   
• I'm using Flexbox positioning, with each SVG in it's own div (flex-end). The idea is to tie the y-offset of that #parallax parent container, so when you scroll down 100px, I can apply a y position modifier function...
   
• Example:
  Sky: is a gradient on the background of that div (not an SVG)
  Stars: scroll .5 the normal y distance as to parent
  Mountains: and .75 speed
  Hills: normal speed
  Trees: x 2 speed
   
• Concerned about performance, but I'd like this to be butter-smooth, which is why i think the smooth ouse-wheel script would need to come first.
   
• My other issue is with the Nuxt / Vue framework... Basically in when to fire this "scroll" function on which event (load, on scroll?)
   

Anyway... I'm still working on Carl's techniques for how best to set up projects, and have yet to re-factor all my TweenMax's, so I'm in a little over my head on this one, but up for the challenge.

Any tips, insight, codepens, etc. that may help me on my way would be most welcomed and appreciated.

Thank you!

[PointC]

Hi @troymartz 

 

Welcome to the forum.

 

Are you offering a job here? I ask because you posted in Jobs & Freelance, but you said:

49 minutes ago, troymartz said:

Any tips, insight, codepens, etc. that may help me on my way would be most welcomed and appreciated.

 

It was unclear to me if you were just looking for some guidance or hiring a freelancer to help you. Any details you could post in regards to that would probably give you the best chance of a response from qualified GreenSockers.

 

Thanks and welcome aboard.

 

[troymartz]

oops... wrong channel..

[PointC]

Hi again @troymartz,

 

I moved your thread to the main GSAP forum. We're glad you're excited about GSAP and thank you for joining Club GreenSock.

 

Your post has a lot to go through so you may want to break it down into smaller bites with more GSAP specific questions or goals. That will probably yield more responses from the community.

 

Happy tweening and welcome back.