Jump to content
Search Community

Search the Community

Showing results for tags 'reveal'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Found 20 results

  1. dhaliwallambi

    Image reveal while hovering on text

    Hello Guys, I want to know to get this effect. Many websites have these. When we hover on a piece of text, images pop-up and when we move away from text, they disapper. Well, the major drawback for me is that I don't know the javascript at all! But I'm great at html&css. I just want a simple effect, image pop-up and move along as we move the cursor on text. I'm sharing the websites which have these effects. I'm including a codepen which has this effect but the problem is, when implement that javascript into my website, it has a part, this on const image = document.querySelector('img') This select all the img tag and I don't even why it has an empty img tag in the beginnning of html. It would be great, if you can help me in any way. https://www.craig-reynolds.com/ https://normal.studio/en/ Thanks & Have a great day!
  2. I’m working on a Next.js project with GSAP free version, where I’ve implemented a footer reveal animation inspired by the behavior on the Raxo website. The goal is to make the footer overlap the main content when a specific section (<div ref={titleRef}>) becomes visible at the bottom of the viewport. Here’s a brief description of my setup: The main content is pinned while scrolling. The footer slides up and overlaps the main content as the user scrolls to the end. I’m using GSAP ScrollTrigger for the animations and react for component structure. You can find my implementation on CodeSandbox: 👉 CodeSandbox Link Problems: Pinning Issue: The main content pinning is not smooth, especially during the transition when the footer starts overlapping the main content. The transition feels jittery and unstable. Footer Flickering: The footer flickers significantly on Safari during the reveal animation. While the flickering in Chrome is minimal and tolerable, it’s highly noticeable and disruptive on Safari (both macOS and iOS). White Area Beneath Footer on Fast Scrolling: During fast scrolling, the pinned footer (set to 100vh) moves slightly, and a white area becomes visible beneath the footer. It seems like the footer isn’t fully pinned to the bottom during these fast scroll events. Relevant Code: Here’s the simplified code structure. The complete implementation is available in the CodeSandbox Link: CustomLayout.js "use client"; import { useEffect, useRef } from "react"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); export default function CustomLayout({ children }) { const titleRef = useRef(null); const containerRef = useRef(null); const mainContentRef = useRef(null); useEffect(() => { if (!titleRef.current || !containerRef.current || !mainContentRef.current) return; const title = titleRef.current; const container = containerRef.current; const mainContent = mainContentRef.current; gsap.set(container, { y: "100%", force3D: true, backfaceVisibility: "hidden" }); gsap.set(mainContent, { opacity: 1, scale: 1, force3D: true, backfaceVisibility: "hidden" }); const timeline = gsap.timeline() .to(mainContent, { opacity: 1, scale: 0.99, duration: 1, ease: "power3.out", }) .to(mainContent, { y: "-2%", duration: 0.5, ease: "power2.inOut", }); ScrollTrigger.create({ trigger: title, start: "bottom bottom", end: () => `+=${container.getBoundingClientRect().height}`, pin: mainContent, animation: timeline, pinSpacing: false, scrub: 1, onEnter: () => { gsap.to(container, { y: 0, duration: 1, ease: "power4.out", clearProps: "transform", }); }, onLeaveBack: () => { gsap.to(container, { y: "100%", duration: 1, ease: "power4.out", clearProps: "transform", }); }, }); ScrollTrigger.refresh(); return () => { ScrollTrigger.killAll(); }; }, []); return ( <div className="flex flex-col"> <header>Header Content</header> <main ref={mainContentRef} className="flex-grow bg-gray-100"> {children} <div ref={titleRef} className="h-[1px] opacity-0 bg-transparent flex items-center"> <p className="relative lg:absolute h-0 w-full bg-red-500 text-5xl font-bold text-white text-center"> Footer Title </p> </div> </main> <footer style={{ minHeight: "100vh", transform: "translateZ(0)", willChange: "transform", }} ref={containerRef} className="lg:relative bg-black text-white h-[calc(100vh+180px)] sm:h-auto z-[2] overflow-hidden" > Footer Content </footer> </div> ); } What I've Tried: Using force3D and backfaceVisibility: Added force3D: true and backfaceVisibility: hidden to both the footer and main content, but these didn’t resolve the flickering, pinning smoothness, or the white area issue. Tuning ScrollTrigger Configurations: Adjusted the start, end, and pinSpacing values for ScrollTrigger. Experimented with invalidateOnRefresh, fastScrollEnd, and easing functions without success. Testing with or Without Hardware Acceleration in CSS: Tried enabling/disabling transform: translateZ(0) and will-change: transform, but the flickering and white area issues persist. Adjusting Duration and Scrub: Changed the animation duration and scrub values in GSAP. This slightly improved the pinning but didn’t eliminate the white gap during fast scrolls. Environment: Browser: Major problem in Safari (macOS and iOS). GSAP Version: Free version ([email protected]). React: [email protected]. Framework: Next.js. Expected Behavior: The main content should pin smoothly during scrolling, and the footer should reveal without any flickering or jittering. Questions: Is the flickering in Safari a known issue, and are there any workarounds or best practices for smooth pinning and reveal animations? Why does fast scrolling cause the footer to shift, revealing the white area beneath it, and how can I prevent this behavior? Are there specific optimizations in GSAP ScrollTrigger to handle such issues on Safari? Any help or suggestions to fix these issues would be greatly appreciated! References: Similar footer behavior: https://raxo.co/ During fast scrolling, the footer should maintain its position without revealing any white area beneath it.
  3. Hello, I have a problem with ScrollTrigger. I want to achieve a similar effect to what you see on this page: Julian Fella in the section where the text "I HELPED COMPANIES GENERATE" appears. Currently, my container is pinned at the bottom, and the animation starts too early. I’m unsure how to delay it. Could you help me with this issue?
  4. Hi everyone! I'm working on a landing page and I need to create a pre-loader that uses my handwritten logo as an SVG. Desired effect: The desired effect is a Stroke Reveal, implemented with GSAP3. How can I achieve this effect? Logo positioning: After loading, the logo/preloader should be positioned centrally on the navbar. Request for help: To achieve this project, I would need your help. What should I study? Best practices? What resources and tutorials do you recommend to learn more about?: Creating pre-loaders Stroke Reveal effect with GSAP3 Dynamic positioning of SVG elements What can I get inspiration from? Do you have any examples of websites or projects that use similar effects? Conclusion: Thank you in advance for your support! Additional information: I'm using GSAP3 My logo is a handwritten SVG The landing page is developed in HTML, CSS and JavaScript Thank you very much for your help!
  5. Hello good people at Team GreenSock, happy new year and all the best wishes! I'm trying to create something similar like in this example Zoomable treemap / D3 | Observable (observablehq.com) , can anyone help me and point me in the right direction? Thank you!
  6. Siam Khan

    Showing SVG on Scroll Trigger and Scrub

    Hello guys. Attached code pen. I am new to GSAP and you can see the animation its basically at a background on a website I want to start showing this on my scroll trigger with my scrub I am a little new to gsap cannot do it can you guys please check it. Attaching the SVG too if you want to do it. The gaps that are coming has elements between them and it will come like this in the attached screen shot. Attaching the svg too. Please make it happen for me. Group 35.svg
  7. Said Mounaim

    Image reveal while hovering

    I have an Image reveal while hovering over a text, what I want is something like on this site https://dennissnellenberg.com/ on Recent work section
  8. It is kind of what I want but due to position absolute I cannot find a way to add multiple scroll trigger and get an animation which is kind of Scroll Animation demo 's story section which reveal stories from underneath.
  9. late_night1982

    Reveal each section title with GSAP

    I created a simple vertical scrolling page with different sections. I would like to display the title for each section with a fixed position when the section is in the viewport. I have an issue in the first section (orange). The position of the title is broken. I'm not sure but perhaps it's related to the HTML element .pin-spacer. I'm new in GSAP and not really sure that my code is ok with what I'm trying to achieve. Any help would much appreciated, thanks.
  10. Maniak Development

    Reveal SVG from right to left and push content

    Hi, I'm having a difficult time with this animation. I have a logo which is going to animate from the bottom then the letters of the logo are going to be reveal from right to left at the same time that it push the logo so everything stays centered. I have and example but it looks like the animation is starting from the center, and not from right to left. I tried to use a background image instead of the SVG and seems to work fine, the issue is that later on I need to change the logo color, so using background image is not an option. Any help would be appreciated. Here is an example of the animation I'm trying to do Screen Recording 2022-07-05 at 15.20.17.mov
  11. Maniak Development

    Reveal image and push content smoothly

    Hi, I have an animation that I'm having issues with. I'm trying to reveal a text while also push the logo at the same time (look video reference) but I can't do it smoothly. On my codepen it shows a big jump for the logo image once the text is reveled. Any help on how can I solve this? Screen Recording 2022-06-23 at 15.32.07.mov
  12. aniketbamotra

    Change text color using mask

    Hello everyone, I'm facing problem in creating this effect in horizontal scroll. https://codepen.io/eighthday/pen/MKqBjX I want to create this same effect for my page reveal but I want my sections to scroll horizontally and then my whole website will be vertical. I tried by changing the "top" with "left" in js but it didn't work as expected. The problem might be in my approach with horizontal scroll as xPercent is transforming whole section and I can't fix the position of start logo. This is what I did. https://codepen.io/aniketbamotra/pen/wvJrNjr PS. I'm new to web development and this is my first time using gsap so help me with this. Thanks in advance
  13. Hi! Thank you so much for this incredibly valuable forum. I've learned a lot lurking already. I am having trouble animating an alternating entrance point based on class name. In my example all 3 images "reveal" from left to right, but I'd like them to alternate so the images ON the right reveal from the right. Each block has a class of either "reveal-image-left" or "reveal-image-right" that could be leveraged instead if the "reveal-image" selector that's being used across all 3 images now. (The HTML is identical for each block with the alternating positioning done with Flexbox) I cannot for the life of me figure this out and I'm not fluent enough in GSAP/Js to get this over the finish line. Many thanks for your help!
  14. I started learning GSAP yesterday and made my first basic tween, so much fun. The tween works OK but before I move on to another and likely repeat obvious mistakes I was wondering if somebody could kindly take a brief look at the GSAP code and advise on mistakes / better organisation. There are plenty of very similar requests, is their a best practice that combines them into single lines or is that just not necessary? And secondly, I was considering adding this to a timeline but couldn't necessarily see how that would be beneficial for this specific case.. would it be overkill? From reading the docs a timeline could make it easier to manage animations if I later wanted to adjust the timings later but is their any other benefit in this case? Best, David
  15. Hi! I'm using the plugin SplitTextJs to create an animation reveal to my titles (you can how I'm doing it in the Codepen). I'm doing this animation on many elements and I want to trigger the animation when the element is in the viewport. With some research I saw that I need to do some loop and a lot of people are doing that with scrollmagic. I was wondering if it's possible to do it without scroll magic. The reason is that I have already many script loaded and I want to have the less script possible to load especially if I'm using it for little things. Thank you
  16. Umer Zaman

    Image revealing animation with GSAP

    Hey guys, I want to add On scroll image revealing animation on my website. Check out the link below to see the image revealing animation which I want to add in my website but I can’t seem to find any helpful example or library on the internet so I could do it myself. It would be great if you guys could help me to do this animations with GSAP because i'm new to GSAP. Here is the Link: http://renvoye.com/case-mixpanel Best Regards, Umer Zaman
  17. digableinc

    Animated SVG stroke to reveal an image?

    I've spent the day testing various methods to get an SVG stroke animation to reveal an image but i've come up with nothing. I've used GSAP to animate SVG's as masks, but i've never attempted to do a stroke animation to act as a mask. I've done this millions of times in After Effects, but just can't seem to wrap my head around this - if its even possible. In this basic pen i've placed a random image below an SVG stroke animation. Anyone know if this is even possible?
  18. For some clarification: Sorry didnt translite the id's to english. rood1 = circle2 rood2= circle2 lijn1 = the line i want to animate and reveal the part slowly.
  19. timdt

    Text reveal animation

    Hey guys, i was lookin on the forum and on the internet to finds something about a show/reveal text animation. I want to draw a line in html and out of that line the text is revealed. almost like you lift a curtain and the text is revealed. Looks very simulair like this. i tried to wrap a text element inside of a div with an overflow and then with gsap lift the div wich will reveal the text behind it. Didnt get that to work unfortunately since the elements both move when i try it. Any suggestions on how to achieve this?
  20. James Feeney

    EventListener reset TimelineMax

    Hi all - this is my first post on GSAP, hope you guys can help me. Love GSAP by the way, it is awesome. I'm using Reveal EventListeners (https://github.com/hakimel/reveal.js#slide-states) to trigger timeline sequences. These sequences are a combination of staggerFrom and from, and I use DrawSVG with Yoyo sometimes too. I found this example that pretty much matches my setup: http://stackoverflow.com/questions/23936987/how-to-trigger-a-gsap-function-when-a-slide-comes-active-with-reveal-js Here is one of the sequences, they all follow the same structure: Reveal.addEventListener('slideName', function () { tl = new TimelineMax(); tl.staggerFrom("#aSlideElement", 9, { rotationY: 1080, scale: 15, y:"-1900px", x:"600px", ease: Power4.easeInOutQuint }, 0.7) .from("#anotherSlideElement", 9, { onUpdate: cssFilterTween, onUpdateParams: ["{self}", "blur", 100, 1], ease: Power4.easeInOutQuint }, 0) .from("#yetAnotherSlideElement", 10, { fill:"#0f0c31", ease: Power4.easeInOutQuint }, 5) .from("#soManySlideElements", 4, { autoAlpha: 0, ease: Power4.easeInOutQuint }, 10) }, false); Reveal is basically a presentation slides framework and each slide has its own sequence that is triggered using an eventlistener. My problem is these sequences do not completely reset the timeline and all the elements when you 'leave' a slide. This means if you go back and forth between slides, the elements are sometimes misplaced, finish in the wrong position or get muddled start/finish timings. Eventually they just slow to a halt and do nothing. I have to refresh the page to get it back to where things started. I've tried restart(), clear(), remove(), kill(), pause(0), etc. I've tried placing 'overwrite: 3' amongst each tween. I've tried placing a single global timeline above the eventlisteners, rather than create a new timeline for each slide. I think it may be something to do with the volatile triggering that occurs when quickly going back and forth between slides, but I assume GSAP should be pretty quick at resetting? Any help would be awesome, this is really puzzling me. Thanks, James
×
×
  • Create New...