en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en ro ro en en en en en en en en en en en en fa en en en en en en fi hbs_lat en en en en en en en en en de es en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en ro en en en en en en en en en en en en en pt en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en ro en en en it en en en de en en en es en hu en es en pt en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
I was preparing to do it by scrollmagic cos before i have done something like this for website sidebar, but mainly i wanted to do it in GSAP 3 cos i already used it for other animation and scroll related function but for this issue couldn't find a simple solution. Thanks a lot @mikel for your very simplified solution, will implement it on my upcoming website very soon. Greensock rocks... 👍
Pin absolute element as fixed for entire page scroll until it reach certain element
See the Pen ExyMZOw by aboutzahurul (@aboutzahurul) on CodePen
Hi, I am trying to pin ".sun" element on bottom right of the page as fixed from start of the page till it reach the ".landscape" element, when ".sun" enter the ".landscape" element then it should scroll as normal with page. I am trying to achieve it by gsap 3 with scroll trigger plugin easiest and efficient way. on my codepen it doing totally opposite what i am trying to achieve. can anybody help please.
One interesting stuff learned today, if i need the trigger animation once, then setting "once: true" will do the job, no need killing or refresh, even from performance point its much efficient. good tips to know, i didn't know that...😂
Fixing to the bottom during scrolling after fading effect
Thank you guys @akapowl @kasim444. will implement this in my future project, without complexity 😀 Greensock rocks 👍, it makes complex task easier...
Fixing to the bottom during scrolling after fading effect
Posted November 11, 2020
Hi, i am not that expart on it but i think the logic maybe:
get the viewport/scroll-container/section clientHeight
then get the desire height where you want to show/pin/animate the download button by divide (clientHeight - viewport height) by 2 for half height
then put your logic on ScrollTrigger onUpdate property (https://greensock.com/docs/v3/Plugins/ScrollTrigger) based on calculated height vs onUpdate progress onUpdate: ({progress, direction, isActive}) => console.log(progress, direction, isActive)
then do the animation as needed on timeline.
Hope it may give you some idea to think about. sorry if i am wrong.... 😂
GSAP/ScrollTigger reload on DOM change/update/replaced by ajax call
Posted November 11, 2020
Hi, @akapowl it seems your solution working here, thanks for your solution 👍... on other hand on ajax page load killing scroll and handling timer bit more work to do 😅...
Ater reading some more documantation i found that, adding ScrollTrigger.refresh(true); on main timeline function revealItemsOnScroll(); resolved the issue simply. so main function changed to:
function revealItemsOnScroll(){ if ( jQuery("#content .item").length ) { var revealItems = gsap.utils.toArray('#content .item'); revealItems.forEach( function(revealItem, index){ var singleImage = revealItem.querySelector("div > img"); var singleTitle = revealItem.querySelector("h2 > span"); var pageElement = gsap.timeline(); ScrollTrigger.refresh(true); if( typeof(singleImage) != 'undefined' && singleImage != null ){ pageElement.to( singleImage, { scrollTrigger: { trigger: singleImage, end: 'bottom top', start: 'top bottom', markers: true onEnter: () => { singleImage.classList.add("active"); }, onLeaveBack: () => { singleImage.classList.remove("active"); }, } }); } if( typeof(singleTitle) != 'undefined' && singleTitle != null ){ pageElement.to( singleTitle, { scrollTrigger: { trigger: singleTitle, end: 'bottom top', start: 'top 90%', markers: {startColor: "blue", endColor: "lime"}, onEnter: () => { singleTitle.classList.add("active"); }, onLeaveBack: () => { singleTitle.classList.remove("active"); } } }); } }); } }
I have also updated the codepane and it seems now working:
See the Pen OJXaamP by aboutzahurul (@aboutzahurul) on CodePen
on my live code its also working fine, will check if there any more issue or not... now my next goal to add smooth scroll into it, i am trying to follow this codepen:
See the Pen 89f1e24fbc30e59edbc186a4c961f35c by osublake (@osublake) on CodePen
let me know if you guys have any suggession....
Thanks you guys, very happy to see your quick respons 👍
GSAP/ScrollTigger reload on DOM change/update/replaced by ajax call
Posted November 11, 2020
44 minutes ago, akapowl said:
That seems to be more jquery related than anything with GSAP.
Can't tell you anything about that, sorry.
sorry... yes page load handelled by jquery... I tried kill but no luck yet, still trying to resolve...
I just updated the codepen a bit so it switch content, you can see on content element change it seems working but if you see the markers and content height etc it still a bit mess, can anybuddy suggest?
See the Pen OJXaamP by aboutzahurul (@aboutzahurul) on CodePen
GSAP/ScrollTigger reload on DOM change/update/replaced by ajax call
Posted November 11, 2020
thanks  @76748-akapowl for your replay and for you suggestion, will try it...
i tried to recreate the issue differently in codepen by replace html but seems like working:
See the Pen OJXaamP by aboutzahurul (@aboutzahurul) on CodePen
but on my real code not working 🤔....  is it because i load them by jquery(). load()? my actual load content code like below:
jQuery("#main-content").load( link + ' #main-content section', function( responseText, textStatus, jqXHR ){ if( textStatus == 'success'){ var pageTitle = jQuery(responseText).filter('title').text(); //Letting browser to know new page loaded and added to browser history window.history.pushState( null, pageTitle, link ); //setting browser title if current browsers don't support pushState title attribute document.title = pageTitle; //scrolling to top window.scrollTo(0,0); console.log( link, textStatus + ' (' + jqXHR.status + ')' ); //Trigger custom events jQuery(document).trigger('page.loaded',[link]); } if( textStatus == 'error'){ console.log( textStatus + ': ' + jqXHR.status + ' loading failed' ); } }); jQuery( window ).on("load page.loaded", function(e) { revealItemsOnScroll(); });
Is there something i am doing wrong?
GSAP/ScrollTigger reload on DOM change/update/replaced by ajax call
Posted November 11, 2020
Hi, I am new to GSAP and trying to reload GSAP/ScrollTigger on DOM #content element change, which can done by many ways, my case: jQuery("#content").load("/somePageURL #content") then the new content replace current page DOM content, and at this stage my code dont work.
On my code pen example  everything works fine on page load (not sure if its the correct way or not) but as if i change #content by calling jQuery("#content").load("/somePageURL #content"); and i replace current content and add custom jquery trigger jQuery(document).trigger('page.loaded',[link]);  so i can reload the main timeline function based on the custom trigger page.Loaded but it never load correctly and GSAP animation breaks, only it work if i reload the page on browser. sorry on my Codepen example i didn't added the ajax function to jQuery("#content").load(); cos i am not very expart on codepen but i hope you guys got the idea. On my newly replaced #content may have more .item element or less or empty so i tried to do some checks before i call GSAP timeline.
after jQuery("#content").load("/somePageURL #content"); call newly replaced HTML (#content) may be like this:
title1                     title3             title4                     title6
So now, how can i reload the scroll triggered animation correctly without reloading the page? Please help...
See the Pen bGeQKvy by aboutzahurul (@aboutzahurul) on CodePen
“I really need to commit to using GSAP more in my daily work & demos. I love pushing native CSS animation as far as I can but every time I use GSAP I’m just blown away. Keep up the great work!”
“I was astonished by the speed and versatility of animating with GSAP.”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“@greensock it’s a great library that many people love, and I know you care deeply about performance :)”
“This is by far the fastest and most active community I've ever seen for getting personalized answers to questions. Only with the help of GSAP and this forum was I able to accomplish my project.”
“With the incredible functionality, and the mind-blowing customer service, the price of Club GreenSock admission is well worth it!”
“GSAP hosts what is in my experience, the most welcoming, patient and helpful support forum I've ever come across. I've yet to see a question flat out ignored and the patience you all have in putting people on the right track, if not flat out solve their p”
“Go and browse through FWA or Awwwards, then view source of anything you see that has cool animation and you will be surprised how widely GSAP is used.”
“I continue to be astounded by the sheer breadth of what @greensock can do. Every time I'm like "ooh, I wonder if I can do X", it turns out I can!”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.