fogseller

On 8/3/2019 at 12:17 AM, clickdeproduto said:

help me and recommend any online courses that teach advanced GSAP, thanks.

 

Like this site:

https://alfacharlie.co/

Hey! By far, the BEST GSAP lessons you can get is Bella by @Ihatetomatoes Petr is a great teacher and not only you will learn super GSAP and ScrollTrigger techniques, but you will learn how to properly structure code, how to implement  Barba and LOT more. It catapult me to another level. Highly recommended 👍 

ah, not my lucky day 😔  congratulation to winners! 👏 

I love the fact that even non-developers and beginners with very limited knowledge of js (like me) still can produce professional looking websites and animation. I learned almost everything I know just by studying code from this community. And I didn’t even scratch the surface yet of what is possible with GS!

Greensock forum is my homepage for a year now and first thing I read with my morning coffee. I open, save and sort in collections every new post because I might need it later. I follow posts and people that have interesting problems or solutions. Then I check their Codepen to see if they have some more gsap magic there...

I love when Jack and Zack (and other Superheroes on forum)  for milionth time ask someone (like me) to make minimal Codepen demo, but still do it with smile on their faces

(you can’t see it, but you can feel it).

thank you

cheers

* not a single emoji harmed in this post

** hatetomatoestoo

10 hours ago, GreenSock said:

Here's a fork with a more advanced flip function that accommodates scale changes: 

 

 

 

Is that what you're looking for? 

Is there a simple way of reuse it on multiple blue boxes on the same page? works beautifully  thank you for this discover!

@GreenSock That's it! 👍 ♥️ 👍   English is not my native language, and that's why sometimes it's hard for me to explain technical stuff. That's why I use too much emojis, so people often think that i'm overexcited, hahaha). Thank you Jack, i appreciate it!  

@GreenSock 😊  thank you for clearing that up for me, I understand now that what I was asking is too much. ☺️  I already eliminated Locomotive scroll from the equation, and I thought this thread was perfect to ask the question about snapping sections since it only uses ScrollTrigger and ScrollTo plugin (and SmoothScroll) used in example from @Ihatetomatoes. I tried to combine it myself with 

See the Pen abdNxEJ by GreenSock (@GreenSock) on CodePen

2 minutes ago, GreenSock said:

@fogseller You could probably do just about anything, sure.

 

If you're asking us to code it all for you, that's just not something I'm in a position to tackle. Sorry. Maybe someone else has time and is willing to do the project. I specifically designed ScrollTrigger NOT to do scroll-jacking, so I'm not inclined to burn a bunch of time trying to mimic LocomotiveScroll, though I'm confident it's entirely doable with just ScrollTrigger and the technique that @Ihatetomatoes is using. 

 

If you really need this functionality and you'd like to hire us on a consulting basis, feel free to reach out via a DM or the "contact us" form and we can try to work something out for you. 👍

Hey @GreenSock,  i think that there is some confusion about my posts. I'm just beginner trying to learn Greensock. I'm not even working on a real projects yet. it's my hobby. For now i'm trying to remake some popular websites just to learn from the real cases (this one is https://katiforner.com/) It was not my intention to offend you or anybody by any means. My apologies. From now on I will just read other people posts.  ♥️

1 hour ago, GreenSock said:

@fogseller I don't understand your comment/question. Can you elaborate? Are you asking us to make a change to ScrollTrigger? 

Hey Jack, sorry for confusion  few days ago i asked about combining Locomotive scroll and GSAP with ScrollTo plugin

i wanted to to create Snapping sections surrounded by regular sections: 

See the Pen abdNxEJ by GreenSock (@GreenSock) on CodePen

See the Pen 1dc38ca14811bc76e25c4b8c686b653d by GreenSock (@GreenSock) on CodePen

Locomotive Scroll was a problem in combination with ScrollTo plugin, and I was wondering is it possible to do the same thing with smooth scroll solution from this thread? Thank you

Hey @ZachSaucier, remember i asked you few days before about combining Locomotive scroll with 

See the Pen abdNxEJ by GreenSock (@GreenSock) on CodePen

@ZachSaucier thank you 😊 

23 minutes ago, Ihatetomatoes said:

@fogseller yes it is possible, just remove the height from the #scroll-container. 

 

You will also need to remove position: absolute from the .line element to make sure that there is some content that will stretch the #scroll-container.

@Ihatetomatoes brilliant! thank you, works like a a charm! one more question, if you don't mind  any tip how to refresh/update on resize? when i resize now, i get either chopped image or empty space 😊  thanks

On 7/15/2020 at 8:26 AM, GreenSock said:

Sure, @Ihatetomatoes, you can just scroll the window and that'll automatically make the ScrollTrigger-based tween update. Here's a fork: 

 

 

 

 

Hi guys, is it possible to resize #scroll-container height based on content inside, not to have fixed value like in codepen example (height: 300%) ? thank you

@ZachSaucier fair enough  i will just forget it and learn something else, cheeers! 🥂

Hey @ZachSaucier trying to make a Frankenstein with this two babies: 

See the Pen 1dc38ca14811bc76e25c4b8c686b653d?editors=1010 by GreenSock (@GreenSock) on CodePen

+

See the Pen abdNxEJ by GreenSock (@GreenSock) on CodePen

=

See the Pen bGExgjO by fogseller (@fogseller) on CodePen

unfortunately, I suck 😎

is it even possible?

YESSS! thank you @ZachSaucier 👍   👍.   👍    

Thank you  @b1Mind yeah, ScrollTrigger, of course 😃 i got it right in the title 😂😂

i saw the example you send, and it is a good start, but katiforner.com example is little complicated version of that.  The screen is split in half, images have paralax effect or even two, and at the same time on the left side we have other things going on. It’s too complicated for me to understand by myself since i’m not professional like you guys 😎

thank you 👍

Hi guys, is it possible to make something like this with ScrollTrigger pin?

https://katiforner.com/

scroll to "Featured project"

note the parallax effect between images and at the same time on the left side background colour change and header fade in and out,

and after 3 slides scroll is unpinned and back to "normal"

thank you

OUYEAH! @ZachSaucier  you are supersupersuperhero!!! brilliant!  thank you so much! 🥂  🚂  

hey @ZachSaucier thank you mate  i already saw that, but since i am newbie i cant get it to work and to look like that one in Locomotive scroll (also, it react to hover, probably its just a small tl animation). 😊  also, in codepen example it doesn't react to mouse scroll and under custom scrollbar is native scrollbar. and its horizontal...  probably i'm missing something cause i'm new to all this and i can't see something thats obvious. probably too much for me  😊 i will keep trying... i appreciate any help. thank youuuu ♥️

@andystent

here are few examples of locomotive websites with custom scrollbar:

https://locomotivemtl.github.io/locomotive-scroll/

https://www.miragefestival.com/2020/

https://www.mazellier.design/

https://abhishekjha.me/muteza/

https://www.izakaya-caen.fr/

https://works.studio/

https://chiaraluzzana.com/

i use Chrome but it works in every browser (except scrolling in Firefox for Mac is little slower)

can we do it with ScrollTrigger and GSAP?  

cheers and thank you _=)

@andystent i know about scroll hijacking, but

can someone smarter then me 🤓 do it just for fun? 😄 locomotive scroll scrollbar looks and works great but thats also hijackings, is it? Everything else can be done with Scrolltrigger quicker and easier. But, that sweeeet little scrollbar 😂😂❤️Anyone have any hints?(except, dont do it 😄) thank youuuuu,

and thank you again andy for great codepen example! 
cheers

New GSAP junkie

hey @andystent that is exactly what i need thank you!

but did you manage to emulate smooth scrollbar like in Locomotive scroll and also appearance and disappearance when scrolling? 

Thank youu