[Problem with rapid clicks on multiple elements]

anyone?

[Problem with rapid clicks on multiple elements]

6 hours ago, GreenSock said:

Hm, it's kinda tough to troubleshoot blind - it'd help a lot if you could post a reduced test case in codepen or something.

 

Oh yes sure - here it is. Animation for one element is again smooth but when you start clicking at all elements at the same time, it's not good anymore.

[Problem with rapid clicks on multiple elements]

Hey. In my project I have few hotspots that change smoothly on click. The problem happens when I quickly click at more then one hotspot - animations don't work well anymore, for example some elements stay visible although I use autoAlpha: 0 for them. Is it possible to improve that with greensock tools or I should just prevent click event until function is done for one element? Thanks in advance!

 

 

See the Pen WJXwgK by anon (@anon) on CodePen

 

[check if element has class in timelinemax]

Oh, so a condition. All right, thanks a lot @Shaun Gorneau  

[check if element has class in timelinemax]

Hey,

'

I would like to change position of element ".hotspot"  based on their additional classes ("hotspot-left", "hotspot-right"). Here's the example to give you the general idea (of course jQuery function hasClass doesn't work):

 

$(".hotspot").hover(over, out);

TweenMax.set(".popup", { autoAlpha: 0 } );

 

function over(){

var overTl = new TimelineMax();

overTl

.to($(this).hasClass("hotspot-left"), 0.5, { x: -20, ease: Power2.easeIn } )

.to($(this).hasClass("hotspot-right"), 0.5, { x: 20, ease: Power2.easeIn } )

.to($(this).find(".icon .group"), 0.3, { fill: "#fff", ease: Power3.easeIn } )

.to($(this).find(".popup"), 0.3, { autoAlpha: 1, ease: Power4.easeIn } )

.fromTo($(this).find(".copy"), 0.3, { y: -20, autoAlpha: 0 }, { y: 0, autoAlpha: 1 } )

}

 

Also, I want to run first two tweens of TimelineMax at the same time - can do this by adding 0 at the end, as I remember?

 

Thanks in advance! 

 

 

[Scrollmagic parallax + sidebar navigation]

16 hours ago, Shaun Gorneau said:

 

Firefox 59.0.2 - Holy sh*t! Didn't expect it to be so good ... I usually wrestle with Firefox. It's perfect there ... I just need to do some image preloading. 

 

@Shaun Gorneau preloader? I'm trying to include one as well. Maybe will put my first pen here... tomorrow 

[Scrollmagic parallax + sidebar navigation]

@Shaun Gorneau your second pen works great at mine. I have no words for how amazing that is! gonna show the final result when I finish the project 

[Scrollmagic parallax + sidebar navigation]

Yes, the solution is great although it is not smooth. Also full-screen background images are jumping during a scroll. jQuery mousewheel plugin seems quite sensitive - it can scroll to third or even fourth section on small move of finger at the starting point. It is already too high level for me to fix  I’m doing small content animations in a meantime.

 

The solution is great for beginners cause I can manipulate the order and time of tweens with ease!

[Scrollmagic parallax + sidebar navigation]

14 hours ago, Visual-Q said:

Here's an example of page piling from a previous discussion that uses scroll majic with pins that may help get you started. 

 

See the Pen LQzmZP by Visual-Q (@Visual-Q) on CodePen

 

 

 

Hey, there's something I don't get... Is it any difference between ScrollMagic and ScrollMajic? Google doesn't provide an answer and  Peter Tichy  uses ScrollMagic in his tutorials. Tough stuff 

 

@Shaun Gorneau  maybe you could explain? 

[Scrollmagic parallax + sidebar navigation]

@Shaun Gorneau your example is amazing for what I need now, thank you for an effort! You all are great, I already love gsap community.

 

I'm gonna get through your code carefully as soon as possible and return with an answer. Thank you again <3

[Scrollmagic parallax + sidebar navigation]

Hey all,

 

Thanks for ur time and answers! I already went through Peter Tichy tutorial which is great for beginners. 

 

The specific effect I am looking for is a soft scroll like here: http://film-makerscoop.com/. I would really appreciate a recommendation of a specific tool I should use for that or maybe codepen example. 

[Scrollmagic parallax + sidebar navigation]

Hey, thanks for advices. I am pretty new to gsap and feel excited by possibilities it gives.

 

Currently I am trying to make more fancy, faster but still smooth scroll between slides, based on this example, but well, I find it hard to achieve smooth parallax effect due to a fact ScrollMagic is not used here:

 

 

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

 

 

Any advices, examples?

Thanks in advance!

[Scrollmagic parallax + sidebar navigation]

Hey,

 

I am looking for a codepen or site example with scrollmagic parallax through sections and static/fixed sidebar navigation. The navigation is 100% of viewport, never hides but has different content for each section; also it has arrows up and down that ofc allow to move between sections.

 

Maybe scrollmagic pinning and/or toggleClass is enough but I am confused. Any advice?

 

Thanks in advance, 

Mary