Jump to content
Search Community

KwabenaOwusu

Premium
  • Posts

    24
  • Joined

  • Last visited

Everything posted by KwabenaOwusu

  1. @Rodrigo: Thanks very much for your effort. After going through the docs, I think I have to experiment with ScrollTrigger.refresh(); because I am altering the whole structure by "taking out" that container. I think Scrolltrigger needs to recalculate.
  2. @Rodrigo: I will try again to put it in simple terms. 1. The green container contains the preload animation and only this should be shown until animation finishes. 2. The rest (mainContainer) is hidden in the beginning. 3. As soon as the animation finishes, the rest(mainContainer) is unhidden and the window scrolls automatically to this container. 4. preloaderContainer should be then hidden. This line (line 36) in my code breaks scrollsmoother. .to(preloaderContainer, { display: "none" }
  3. @GSAP Helper: I am confused by your "answer". I add the link to codepen. In my first post. https://codepen.io/KwabenaOwusu/pen/KKYMJez
  4. @Rodrigo: Thanks very much for the useful hint. I followed your advice and it is working. Unfortunately I am encountering a small issue I couldn't solve yesterday. I am trying to hide "preloadContainer" after the animation is done. I created a master timeline and I can find the right spot to add: gsap.to(preloadContainer,{display:"none"}) . Goal: Scroll down to mainContainer using "gsap.to (window,{scrollTo:mainContainer}) and hide preloadContainer, which is above mainContainer. My timing is off: preloaderContainer is hidden before the animation (scrolling down finishes). Thanks in advance
  5. Hi All, I am encountering an issue which I couldn't solve in the last two days. Structure using two main containers: "preloadContainer" and "mainContainer". preloadContainer contains an animation, which runs on page load. mainContainer is hidden using "display:none". After animation finishes, mainContainer is set to display:"block". I am using ScrollSmoother. It seems that hidden an element with "display:none" and unhidding it with "display:"block" breaks ScrollSmoother. "Visibility:hidden" and then "autoAlpha:1" does not break scrollSmoother but I cannot use that (User could scroll away from animation container). Any ideas? Thanks very much.
  6. Hey @mvaneijgen, unfortunately position:fixed didn't solve the issue. I am trying to understand what you are proposing. Obviously all content is wrapped in "smoother-wrapper" ->"smooth-content" In a container named " preview" I have those clickable elements which animate using Flip to show and hide "details". "Preview" and "details" are separate containers. You mean I should put "details" inside of "preview"? Thanks .
  7. @mvaneijgen: Thanks very much. It seems to work. At least on codepen. I will try on my wordpress installation.
  8. I had to simplify everything and create a codepen to illustrate the issue. This is my codepen: Codepen Link Issue: It seems SmoothScroller css is the main issue or I am missing something. Code works fine but the element to be revealed to pushed to the top of the page and becomes invisible because the it has "position:absolute". As far as I can see SmoothScroller container is also assigned "position:absolute". How do I solve the issue. My goal: Element to be revealed should show up in the current scroll position. Thanks very much in advance
  9. Hi Team GSAP, The flip plugin just stopped working. Even though I didn't change the code. The console doesn't show any errors either. Do you have any suggestions? Thanks
  10. @mvaneijgen: Thanks very much. I am already subscribed to his course. Seems I jumped over that part. I will have a look.
  11. Hey All, It seems I am missing something basic. In this staggerd animation ( FADE IN ANIMATION). There is a jump between first and the last scene. I have three DIVs positioned absolutely. So I was expecting DIV 'THREE' to be the first scene because I didn't change z-Index. But somehow the animation starts with DIV 'ONE'. My goal: Fade in image within 3 seconds. Image then stays visible for 3 seconds, then fade out. Thanks for your time. /*CREATE ARRAY */ let fadeInImages = gsap.utils.toArray(".swapMe"), numOfFadeInImages = fadeInImages.length; /*FADE-IN ANIMATION*/ let fadeAnim = gsap.timeline({ repeat: -1 }).from(fadeInImages, { autoAlpha: 0, duration: 3, stagger: { amount: 9 }, ease: "none" });
  12. @Rodrigo : Thanks very much. That is the solution I was looking for.
  13. @Rodrigo Thanks very much. I was trying to find out for example how to reverse the animation in this case. So far I am only familiar with ToggleActions or onLeave etc.
  14. Hey All, Thanks for your time. Scenario: I am using a Scrolltrigger.observe example I found in this forum and want to modify it slightly. Issue1: I think any animation code should be in function gotoPanel. But somehow simple animations are broken, once they run twice or three times. Issue 2: How to I reverse animations if code goes into function gotoPanel part instead of creating an animation and linking that animation to the Scrolltrigger ( e.g. if I move H1 in a panel to right. Right now animations stay in their new state /* EXAMPLE ANIMATION */ let panelHeading = target.querySelector("h1"); gsap.to(panelHeading, { color: "red" }); Any hints? Thanks very much in advance
  15. @Rodrigo : Thanks very much. I should spend more time on ScrollTrigger docs. I need to figure out how exactly customer scroller works and how to use functions for 'start" and "end".
  16. Hey Folks, I've spent almost a day trying to figure out simple things but failed. Issue: I have a pinned section (images stacked on each other). Below that section I have three textboxes which are meant to scroll up until the bottom of that box meets the bottom of the pinned section. Then fade out. My logic is all over the place I feel like giving up. Could someone point me in the right direction? Thanks very much.
  17. @Carl: Thanks very much. Yes, I enrolled in your course three months ago (26th May ). I am currently on the monthly subscription. I think I will switch to the "lifetime" package. BTW you are the best coding teacher. Your courses are great.
  18. Hi Team, I am a GSAP newbie , Club Green Sock member , I bought a snorklTV creativecoding membership. Short: I am trying my best to learn as much as I can. Question: In the above example the container width is 600% but for the scrolltrigger you set -> end: "+=3500". Could let me know why 3500 px from the starting point (trigger element)? Thank you.
  19. @mvaneijgen: Thanks very much. I thought I missed something in the Observer docs.
  20. Hi All, Issue: Sections with 100vh / 100vw stacked on each other (full page) so scrollbar not showing. Solution tried: I set sections height to 110% hoping to get scrollbars but scrollbars still not showing. I don't need the scrollbars but the issue is that, Observer plugin is ignoring keyboard up/down and I dont want to assume that everybody has a mouse with scrollwheel. I edited the configuration for Observer but still keyboard is been ignored. Thanks for help. Type: "wheel,touch,scroll,pointer"
  21. Thanks very much for pointing me in the right direction, Cassie ? I will try to find a solution. Regards
  22. Hi All, I want to thank you in advance for taking your time to read. I am new to GSAP and and somehow intermediate CSS/JS guy. All day I've been trying to find out what I am missing. Issue: the background color (body) becomes visible during the animation. In your original pen as well as another one I studied, the background color of the body is not visible during the transition. This is what I am trying to achieve. I have set body background-color to make it even more visible. This is the original pen (using background images): https://codepen.io/GreenSock/pen/GRQKPMo This is a copy I studied as well: https://codepen.io/Chybosky/pen/mdXbLOJ My pen: https://codepen.io/KwabenaOwusu/pen/ZEmgaYB
  23. Hey All, I have been trying to solve this issue for hours. Still no luck. Maybe someone can point me in the right direction. Issue: Last section ("panel grey" ) always picks up the background color of the previous section. I think I am missing something (array length and the counting, maybe ?). CSS should be fine. Thanks very much.
×
×
  • Create New...