Alexyn0o

Thanks for the fast reply @OSUblake ... I understand. Will have a second look into what you shared, because I think I tried it once but can't remember exactly why I didn't end up using it. Best guess would be that it was lagging...

http://www.everyday3d.com/blog/index.php/2014/08/18/smooth-scrolling-with-virtualscroll/

--

https://greensock.com/docs/v3/Plugins/ScrollTrigger

Cannot figure out how to setup scroller proxy for this... yikes!

If anyone could help - I'd really appreciate it,

Thank you guys

See the Pen NWgWRxj by designismore (@designismore) on CodePen

@OSUblake you are a madman and a mastermind! Thank you so much for opening my eyes and showing me a clear path to solving this!

I've adjusted the code you provided and added/changed a few things.

1. used two timelines, one for mobile one for desktop.

2. used gsap.set to clearProps: true and .kill(); to destory previously created timeline every time the initDesktop/Mobile was triggered. 

Here is the working pen preview:

See the Pen MWmKMdG by designismore (@designismore) on CodePen

I appreciate all the help! Hope this helps out others having similar issues/needs.

Best,

Alex

Thanks for the tip Jack. Ok, I was assuming it's not really GSAP sort of problem. Anyway I appreciate your answer. Will further investigate the code and try to fix it based on your remark.

Best,

Alex

This is the initial code before trying to add mediaqueries and extra selector.

 
$('nav > #menu').each(function(i, el) {
 	var tl = new gsap.timeline({
		paused: true
	}); 
	tl			 
		.from($(el).find('.menu-links'), { duration: 0.4, autoAlpha: 0	}, 'Sametime')
		.from($(el).find('.menu-links > li > a > span'), { duration:  0.4,	x: "-100%",	opacity: 0,	ease:'sine.inOut' }, .05, 'Sametime');
		
 
	 $(".icon-top").on("mouseenter", function() {
	  tl.play();
	});
	
	$(el).on("mouseleave", function() {
	  tl.reverse();
	});	
 
 
 });
 
 

ultimately i'm looking for it to change to

$('nav > #menu').each(function(i, el) {
 	var tl = new gsap.timeline({
		paused: true
	}); 
	tl			 
		.from($(el).find('.menu-links'), { duration: 0.4, autoAlpha: 0	}, 'Sametime')
		.from($(el).find('.menu-links > li > a > span'), { duration:  0.4,	x: "-100%",	opacity: 0,	ease:'sine.inOut' }, .05, 'Sametime')
		.from($(el).find('#social'), { duration: 0.4, autoAlpha: 0	}, 'Sametime');
		
 
		$(".icon-top").click( function() {
			tl.play();
		});
			
		$(document).on('click', function(event) {
			if (!$(event.target).closest('.icon-top').length) {
			tl.reverse();
			}
		});
 
});

but only on viewport resize
 

Hello, can anyone help me with this error? (I want to preface that I'm a newbie at coding and I only try to adapt from other as much as I can understand...)

I have adapted some code from the forum which explained how to use GSAP for different media queries but I cannot seem to make the functionality work...

The idea:

When page is fullscreen, the menu icon should trigger and animate GSAP timeline on >mouseenter/mouseleave< for selector ".menu-links". ( I used .play(); and .reverse(); )

When page is going devices size screens, mobile/tablet < 733px, the menu icon should trigger and animate GSAP timeline on >click< for selector ".menu-links + #social" ( I used .restart(); and .reverse(); )

---- the code works right now only when page is loaded in mobile size to begin with, if resized functionality breaks. also vice versa, desktop resized to mobile ----

My question is can: this be done better? Ideal would be to resize page without losing functionality going from big screens to small screens without page reload.

====

ps: if this topic is wrongfully opened please feel free to delete it.

Thank you very much,

Alex

See the Pen LYyVaRw by designismore (@designismore) on CodePen

29 minutes ago, AslanGoi said:

@Alexyn0o Oh, sorry! I didn't notice this, you can do it like this:

$(".just-a-menu-icon").on("mouseenter", function() {
    tl.play();
});
$(el).on("mouseleave", function() {
    tl.reverse();
});

 

Thanks man! This and a little bit of css adjusting did it. I'm embarrassed for asking help when it wasn't even a gsap problem... lol.

Anyway I appreciate it!

@AslanGoi Thank you... close but not quite the desired outcome...

The menu items should stay open when I move the cursor on one of them (and only on mouseleave they should close), in this case you suggested the moment the mouse leaves the menu icon the animation closes (reverses). Not what I was expecting.

Any new ideas?

Greetings Greensock wizards,

I want to say thank you for the code demonstration, I have tried this on my menu, and it works!

Only one problem I can't seem to figure out is how can I cancel the hover animation over the overflow:hidden element and just trigger it on the menu icon only?

Currently If the hidden area is hovered the animation will start and items will slide in, I need this to happen only on when hovering the icon...

This may be a css problem if not a gsap one, I'm a newbie and I don't know how to achieve this the best way possible...

See the Pen NWxPgpK by designismore (@designismore) on CodePen

Anyone want to help?

Thanks

Understood! I'll keep that in mind.

Thank you for pointing that out.

Stay awesome guys.

Until next time..

Regards,

Alex

Thanks for the example.

I took the time also and made these examples for a better understanding.

See the Pen MROxJJ by Alexyn0o (@Alexyn0o) on CodePen

vs

See the Pen JVOzqw by Alexyn0o (@Alexyn0o) on CodePen

So, I need the first example where the statue is being fixed by background-attachment so that the scrolling makes visible(reveals) the image from bottom-to-top vs second example where the visibility of the statue is already full when you scroll.

First example is fine for me. But are there bad implementations with gsap (.set for bgPosition) that makes the performance poor? Should I find a new solution into achieving this effect with translations still? 

ps: Just by applying any transform to the #statue element makes it's background- attachment null.

Thank you all for your time and information,

Hope you have a nice day

Alex

Sorry I don't know how to describe this... hope you understand what I'm trying to explain...

Look at the left of the screen "DaVinci statue" element being rendered from bottom-to-top on scroll because of the attachement: fixed.

Using TweenMax.set backgroundPosition for moving-animation, doesn't mess the scrolling effect and gives the element the movement.

But, if I use transforms to move-animate the image, then the "DaVinci statue" element would already be rendered fully because of the translations. It doesn't preserve the attachement-fixed "parallax feeling" on scroll.

Solution found,

See the Pen xegVbe by bsilvia (@bsilvia) on CodePen

❤️

And my try using .set

See the Pen ROKZNE by Alexyn0o (@Alexyn0o) on CodePen

Hi Mikel, thanks for the greet I'm happy to be here and eager to learn and share experience!

Thank you for the feedback too, based on the first post I managed to edit the code into something like this:

See the Pen MRJKLQ by Alexyn0o (@Alexyn0o) on CodePen

$(document).ready(function() {
    var movementStrength = 25;
    var height = movementStrength / $(window).height();
    var width = movementStrength / $(window).width();

  $("#bgmove").mousemove(function(e){
          var pageX = e.pageX - ($(window).width() / 2);
          var pageY = e.pageY - ($(window).height() / 2);
          var newvalueX = width * pageX * -1 - 25;
          var newvalueY = height * pageY * -1 - 50;
    var tlmovebg = new TimelineMax()
          TweenMax.set("#bgmove", {backgroundPosition: "center " + +newvalueY+"px"});
    });
});

It works.. (but not sure if it's the best way)

It's only moving on the Y axis... haven't figured out how to add the X axis variable yet.

And now I get an error in the console that says: 'too much recursion' - I understand it's an rangeError making too many calls but I don't know how to fix this...

Anyone mind giving a hand?

Thank you, I appreciate your time.

Hello, is there a way to integrate such an effect with GSAP?

I know I can achieve this effect with css transform translations, but in my case I need to use background-position to animate the movement related to the mouse position.

an idea/approach about what I'm thinking:

.. //


TweenMax.to(".top-image",  1, {backgroundPosition: newvalueX+"px     "+newvalueY+"px", ease:Power4.easeInOut})


// ..

ps: The pen is just a preview example for what I'm trying to achieve.

Hope some GSAP guru' drop some knowledge or show me a solution , I'm a newbie in the field...

Thank you,

Best regards!

Alex

See the Pen VrqrbN by Mojer (@Mojer) on CodePen