moonIMD
moonIMD's Achievements
-
-
Rare
-
-
-
Rare
Recent Badges
0
Reputation
-
Hi, I am using scrolltrigger to pin a section, but the marker positions starts to shift. It starts to shift when the top header (which contains the logo and nav) becomes position:fixed . The header starts with no position values set, but as user scrolls down, the header becomes sticky, so position:fixed is added. Is it because of this (from position default to position fixed) it causes the markers to shift? Is there a way to fix this issue? Thank you!
-
Thank you @Rodrigo! Then there isn't a way to pin the section (parent container) while making the stacking card effect work?
-
This is my codepen link: https://codepen.io/moonIMD/pen/OJBdREE
-
Hello, I am having some issues with pinning a section (making it fixed) while having a stacking card effect inside the pinned section. The pinned section has an image on the left and the stacking cards on the right. I want that whole section to be fixed as it scrolls to that section. The image on the left should still be show while there is a stacking card effect on the right. However, when the parent container is pinned, the stacking card effect isn't working. When I remove the pinning codes (for the parent container), the stacking card effect is working fine. What is the issue? How can I pin a section while having the stacking card effect inside that pinned section? I am using these urls for the stacking cards effect: https://greensock.com/forums/topic/33597-stacking-cards-overlap/ https://codepen.io/Mohsen-Khakbiz/pen/WNzBrdz https://codepen.io/GreenSock/pen/MWmVwpX Thank you!
-
We have few sections with a data attribute (data-name) on each. We want to update the body classname when it enters the section. The data-name is the classname that we want to add to body. Below is my code, but it's not working: const updateBodyClassName = (name) => { //code to add/update classname to body/html class via data attribute (data-name) from section } const sections = gsap.utils.toArray('.section'); sections.forEach(section => { ScrollTrigger.create({ trigger: section, start: 'top center', end: 'somehow get the height of each section(??)', onEnter: () => updateBodyClassName(section.dataset.name), markers: true }) }); HTML: <div class="section" data-name="class1"> <h1>One</h1> </div> <div class="section" data-name="class2"> <h1>Two</h1> </div> <div class="section" data-name="class3"> <h1>Three</h1> </div> #1) I am trying to get the height of the sections since the height varies. This is for the 'end' parameter in the ScrollTrigger. #2) Not sure is there a way to update the body/html classname when we enter a section. I know there is a toggleClass, but this isn't what we need, since the class names are all different for each section. In the code, I have 'onEnter', so when it enters a section it will trigger the updateBodyClassName() function. In this function, it should go update the body/html class name: const updateBodyClassName = (name) => { //code to add/update classname to body/html class via data attribute (data-name) from section } For example, when we scroll to or enter section 1, the section 'data-name' value should get added to the body/html class, like below: <html class="no-js class1"> When it enter section 2, the section 2 'data-name' value should replace 'class1' from the html class (not appending class name), like below: <html class="no-js class2"> Is there a way to add a class name to body/html when it enters a section, then somehow replace the newly added class name when it enter another section? Thank you!
-
Hello, I am trying to achieve this effect similar to the top banner on this URL : https://www.xiaohongshu.com/en?source=official A text mask is overlay on the video, and as users scrolls down, the text changes to a solid color and the video is revealed. Can GSAP achieve this result? And can someone point me in the right direction? Thank you!
-
Thank you! Yes, it makes sense!
-
Thank you so much for you help on this! It's looking great and it makes sense! I am just going through your code trying to understand the 'onLeaveBack: () => i || goto(null, 0)' This onLeaveBack is a function when the scroll position moves backward. The 'i' is the index of the section and is it passing that 'i' to the goto()? But it also has this '||' (OR), so I don't quite understand what this line is doing. Thanks again for your help!
-
1. I will try to use the gsap tween to re-create the animations. 2. To have the 'timeline_container' div animate up and down once it enter or leave the active section, should I not being 'setting style.marginTop' and use gsap tweens (such as gsap.to() gsap.from()) instead. As well, am I correct of animating the 'timeline_container' in the onEnter & onLeaveBack functions? Thanks!
-
Just want to show some screenshots of what I mean on the resizing issue. Please find 2 screenshots attached. before-resizing.PNG (screenshot #1)- In this screenshot, the markers are in the correct position after-resizing.PNG (screenshot #2)- In this screenshot, I have scrolled down to a couple of years, then resized the browser, then scrolled back up to the first year. The markers are in the wrong position.
-
Thank you! I did try that way before without the resize event and when resizing the browser, all the start / end markers were in the wrong position. Also when viewing it on mobile phone, the markers are not in the right place (even when reloading the page). What is the issue? Thank you!
-
HI, I would like to create a vertical animated timeline similar to this http://mtcubacenter.org/about/history/ I have started it, but it's not working properly. Every time I resize it, the start and end markers are not in the right position and sometimes it will duplicate a lot of the start / end markers. As well, when viewing on mobile, the start/ end markers gets all crazy when scrolling up and down. What am I doing wrong? Is there a better way to do this? I want the timeline section to be fixed and the child elements (the years) to animate in/out when scrolling up/down. All the paragraph tags are invisible at start and once each enters the viewport, it becomes visible. This is the codepen url: https://codepen.io/moonIMD/pen/KKQOgBp Thank you!
