Jump to content
Search Community

Initiate GSAP Events on scroll, not on page load.

Guest JNapolitanoIT
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Guest JNapolitanoIT

Hey there everyone in the community, I am new here and firstly I gotta say to the GSAP Dev's...GREAT JOB, amazing plugin. But, even with its ease of use, I found it hard to aquire my desired effect. What I iam to accomplish, is to initiate a text animation I have used from your examples in the ZIP file, upon scrolling over the desired DIV. As it sits, GSAP uses:

$(window).load(function() {

to initiate the animations declared in the JS. Since I do not ant the animation to instantly start on page load, and I want it to start once scrolled over, this does not work for me. Now, I have tried the simple and powerful:

$(window).on('scroll', function() {

to try to reach my results. Hoever, even though it works upon scrolling over. It also works upon page load. Meaning, that lets say Im at the point of origin where the animations take place on the page. I refresh my page in that spot and the GSAP takes place right away. I move out of that space to another point on the page and scroll back to the animation area, and the letters in the animation are there as if the animation has finished (which it has because it still initiated on page load somehow) BUT then... the animation occurs upon scrolling over, but, get this...the animations from the scroll, take place underneath the completed animation that occured on page load. It is very hard to explain but you can evaulate my code below, and maybe help me to get the animation to only take effect when it is scrolled over. Here is my code:

$(window).load(function() {
	var logo = $("#logo"),
		progressValue = $("#progressValue"),
		totalProgressValue = $("#totalProgressValue"),
		timeValue = $("#timeValue"),
		totalTimeValue = $("#totalTimeValue"),
		restartBtn = $("#restartBtn"),
		txtContainer = $("#txtContainer"),
		tl, 
		progressSlider, 
		totalProgressSlider, 
		txt;
	 /* Build DOM Elements*/	 
		function splitText(phrase) {
			var prevLetter, sentence,
				sentence = phrase.split("");
			$.each(sentence, function(index, val) {
				if(val === " "){
					val = " ";
				}
				var letter = $("<div/>", {
							id : "txt" + index
				}).addClass('txt').html(val).appendTo(txtContainer);
		
				if(prevLetter) {
					$(letter).css("left", ($(prevLetter).position().left + $(letter).width()) + "px");
				};
				prevLetter = letter;
			});
			txt = $(".txt");
		}
/* Build Timeline  */
	function buildTimeline() {
		//note this timeline uses 3D transforms which will only work in recent versions of Safari, Chrome, and FireFox. IE10 will support 3D transforms as well. All other browsers simply will not show those properties being tweened. 
		TweenLite.set(txtContainer, {css:{perspective:500}});
		tl = new TimelineMax({onUpdate:updateUI, repeat:2, repeatDelay:1, yoyo:true});
		tl.from(logo, 0.5, {left:'-=60px', ease:Back.easeOut});	
		tl.staggerTo(txt, 0.6, {rotationX:"360deg", color:"858585", transformOrigin:"50% 50% 10"}, 0.02);	
	} 
	/* callbacks */
		function updateUI() {
			//change slider value
			progressSlider.slider("value", tl.progress() *100);
			totalProgressSlider.slider("value", tl.totalProgress() *100);
			
			//update display of values
			progressValue.html(tl.progress().toFixed(2));
			totalProgressValue.html(tl.totalProgress().toFixed(2));
			timeValue.html(tl.time().toFixed(2));
			totalTimeValue.html(tl.totalTime().toFixed(2));
		} 				  

	
	function init() {
		splitText("CONTACT US");
		buildTimeline();
		//show the demoBackground div after DOM is ready and all images loaded
		TweenLite.set($("#demoBackground"), {visibility:"visible"});
	}
		 
	init();
});

If anyone sees what I am doing wrong here, or can help...please do. I am not very new to JS or jQuery but am very new to GSAP. So any help is appreciated. Thanks in advance!

 

EDIT: Here is my HTML:

<div id="demo">
    <h1 id="txtContainer"></h1>
  </div>
</div>

Thanks again!

~Jason of AJADMIN Websites

Link to comment
Share on other sites

Hi and welcome to the forums.

 

Your code doesn't seem to actually include anything related to scrolling, so I'm not sure how to evaluate it. If you need us to investigate some code you've written, please endeavour to create a reduced Codepen example so we can take a look.

 

That said, it sounds like you would be best served using a plugin that can trigger tweens at certain scroll positions. ScrollMagic appears to be pretty popular for this. Please note we only support GSAP here, not ScrollMagic, so if you are having trouble using it please refer to their support guidelines.

  • Like 2
Link to comment
Share on other sites

Yep Jamie is right. It's much easier and faster to check a live reduced sample in order to check your code.

 

I'll add that, for what you're posting, you want your code to be executed as the user scrolls. In that matter, as Jamie points, ScrollMagic would be a very solid choice but if you want to do something more simple by yourself you can check this:

 

http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/

  • Like 2
Link to comment
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.
×
×
  • Create New...