Jump to content

Search the Community

Showing results for tags 'marquee'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 15 results

  1. Satvik

    Infinite Marquee

    Hello GSAP community, I hope this message finds you well. I'm currently working on implementing an infinite marquee animation using GSAP. I would greatly appreciate any insights or suggestions you might have to optimize this code and make the animation smoother. Perhaps there's a better approach or specific settings I should be using? I'm particularly concerned about performance on less powerful devices and would like to ensure a consistent experience for all users. Thank you in advance for your time and expertise. Your input would be invaluable in helping me improve this animation and learn more about efficient GSAP practices. Looking forward to your guidance and suggestions.
  2. How can I implement a marquee with GSAP which changes direction on scroll (ease part), but then it continues in the reverse direction from the state it was there previously (tough part, couldn't figure out this) https://drive.google.com/file/d/1J4Dquyl-proyeh5EqPTXioNAfFQc_twq/view?usp=sharing Site link: https://hello.cuberto.com/
  3. Gvnn

    Marquee Effect Cards

    Hello, I am building a website with vue 3 and i want a section to have this marquee effect (products scrolls infinitely + responsive). But i am having trouble to build it. can you help me? Thank you so much! vue verison https://codepen.io/berkegvn/pen/bGOENjy i want something like this one, stops when hover and drag to move both sides. https://codepen.io/animaticss/pen/ZEqdMmr HTML SCSS version
  4. Hi there beloved community. I'm in the process of launching a new portfolio but there's a bug with my GSAP-based marquee which showcases my projects in a gallery. From what I can see it looks like my code doesn't calculate the proper width & height of all of the media's inside of the marquee. And sometimes on load it only loads some of the actual content inside. Another thing: the marquee height is clamped, and inside of my runMarquee function it looks like the height doesn't adapt when resizing. I use: SvelteKit (framework) Hygraph (GraphQL) Another issue I'm facing is that most of my content inside of the marquee's has different aspect-ratios, especially the videos doesn't load in the proper format. So please also look for a solution to this. Preview link of website: https://krause-ew9w4q45a-asgerkrause.vercel.app/ sometimes it works and sometimes it doesn't. I need it to be bullet-proof. If you have a stronger code for the same results, please let me know! HTML structure: <div class="marquee"> <div class="track"> <!-- Media will go here --> <video autoplay loop muted src={url} type="video/mp4" /> <img src={url} alt="" /> </div> </div> CSS: .marquee { height: clamp(18.75rem, 12.5rem + 16.6667vw, 25rem); position: relative; overflow: hidden; display: block; margin-left: calc(var(--space) * -1); width: 100vw; } .marquee .track { height: 100%; transform-origin: 0 0; display: block; position: relative; } .marquee .track > * { height: 100%; width: auto; padding-left: 4px; position: absolute; object-fit: cover; } JS: onMount(() => { function runMarquee() { const allMarquees = document.querySelectorAll('.marquee'); allMarquees.forEach((marquee, index) => { marquee.querySelector('.track'); const allItems = marquee.querySelectorAll('.marquee>.track>*'), proxy = document.createElement('div'); allItems.length; let totalX = 0, marqueeH = 0; marquee.offsetWidth; allItems.forEach((item, i) => { const itemW = item.offsetWidth, itemH = item.offsetHeight; (totalX += itemW), gsap.set(item, { x: totalX, width: itemW, height: itemH }), itemH > marqueeH && (marqueeH = itemH); }); const marqueeVal = gsap.utils.wrap(0, totalX), marqueeProgress = gsap.utils.wrap(0, 1); gsap.set([marquee], { height: marqueeH }); const stringX = `-=${totalX}`, animation = gsap.to(allItems, { repeat: -1, duration: 300, x: stringX, ease: 'none', paused: !0, modifiers: { x: function (x, target) { return `${(x = ((parseInt(x) - totalX) % totalX) + (totalX - target.offsetWidth))}px`; } } }); function updateProgress() { const dragValue = marqueeVal((this.deltaX / 2) * -1) / totalX, currentProgressAnim = animation.progress(), endProgress = marqueeProgress(currentProgressAnim + dragValue); animation.progress(endProgress); } Draggable.create(proxy, { type: 'x', trigger: marquee, inertia: !0, onDrag: updateProgress, onThrowUpdate: updateProgress }), window.addEventListener('resize', function resize() { animation.render(animation.time(), !1, !0); }), animation.play(); }); } runMarquee(); }); Thanks
  5. I have an infinite marquee, that i thought was working, however it jumps at the very end slightly, im not quite sure why im wondering based on the code provided below if theres anything that looks wrong in what im doing? JSX File: const MobileMarquee = ({ client }) => { // NOTE • Refs const main = React.useRef(); const first = React.useRef(); const last = React.useRef(); React.useLayoutEffect(() => { const ctx = gsap.context(() => { // Split characters const split = new SplitText(first.current, { type: "chars", charsClass: "char", }); // Split characters count + timing calculation const charsTotal = split.chars.length; const timingFactor = charsTotal * 0.25; let timeline1 = gsap.timeline(); let timeline2 = gsap.timeline(); timeline1.fromTo( first.current, { xPercent: 0, }, { xPercent: -100, repeat: -1, duration: timingFactor, ease: "none", } ); timeline2.fromTo( last.current, { xPercent: 0, }, { xPercent: -100, repeat: -1, duration: timingFactor, ease: "none", } ); }, main); return () => ctx.revert(); }, []); return ( <Jacket isPaused={isPaused} ref={main}> <div> <ul ref={first}> {words.map(({ word, uid }) => ( <li key={uid} className="el"> {word}&nbsp;–&nbsp; </li> ))} </ul> {/* Dupl */} <ul aria-hidden="true" ref={last}> {words.map(({ word, uid }) => ( <li className="el" key={uid}> {word}&nbsp;–&nbsp; </li> ))} </ul> </div> </Jacket> ); }; CSS/JS: // Imports // ------------ import styled, { css } from "styled-components"; // Exports // ------------ export const Jacket = styled.h1( (props) => css` position: relative; z-index: 3; overflow: hidden; width: 100vw; div { display: flex; width: fit-content; } ul { display: flex; width: fit-content; position: relative; justify-content: flex-start; transform: translateX(0); li { display: flex; align-items: center; font-weight: ${props.theme.font.weight.reg}; font-family: ${props.theme.font.type.heading}; font-size: 6rem; line-height: 1.2; color: ${props.theme.colors.brand.bc4}; user-select: none; white-space: nowrap; } } ` ); Codesandbox Recreation: https://codesandbox.io/s/react-hooks-example-w-clicker-t6yno?file=/src/pages/index.js Kapture 2023-05-25 at 23.24.09.mp4
  6. I am working on this usecase when text needs to scroll across the screen ad-hoc. I am using gsap throughout the project without issue but the animation of the text is kinda choppy. Not sure if there's a better implementation than what I'm doing here.
  7. Hello, first timer and a newbie here. I've been trying to create a vertical Marquee that scrolls vertically with pauses at interval that works exactly like this: https://www.jqueryscript.net/demo/Flexible-jQuery-Vertical-News-Ticker-Plugin-Advanced-News-Ticker/# But I've been hitting a road block. Your help is appreciated.
  8. Marquee seems to break on resize. Loads and runs as expected on refresh. Any ideas?
  9. Hello. I have a div with some texts and I looped this div infinitely which is working fine. But my problem is with changing the direction of marquee. When I do tl.reverse() it makes the reverse but the loop ends when it hits the beginning. How can I make it infinite even after the direction change? I know there is many posts about this topic but I still can't make it done.
  10. Hey guys, I'd like to achieve an infinite horizontal animation that changes direction (and speed) depending on whether the user scrolls up or down. The animation currently changes with scroll, but eventually stops (see codepen). I know there are a few examples of infinite loops on the forum, however I wasn't able to combine them with a change in scroll direction. Any help on how to create an infinite loop with this example would be amazing Cheers~
  11. Hello Guys, I have used the gsap marquee effect but I am getting some issue when marquee effect repeats. It is working fine on first time when it repeat the second time, it shows some gap and after some time it shows the content. I want to make it smooth and infinite loop without any gap. I am unable to fix this issue. Anybody please help me on this? I will appreciate your help. Thanks in advance!
  12. I recall seeing a nice marquee example, but I can't track it down. Undoubtedly this is a common use-case for a horizontal marquee / scroller (logos, testimonials, etc.). I'd like the beginning of the next animation to trail the end of the one that's about to end. As it is, I have a space between the two. Please point me to the example, or check out my code and codepen below: gsap.timeline({ repeat: -1, defaults: { ease: "none", }, }) .fromTo( ".card", { x: (i, el) => innerWidth * i }, { x: (i, el, t) => -innerWidth * (t.length - i ), duration: d, } ); Thanks
  13. Hello, I'm trying to update this @Shaun Gorneau Codepen. First of all I would appreciate some help moving the code from jQuery to plain JavaScript. I'm stucked On the other hand I'm experimenting with this pen trying working with a font-size relative to the window width (example: font-size: 8vw;). Obviously, on window resize it messes up all the programming because it changes the object width. Anyone has a better idea than refreshing the page on window resize with a classy: window.onresize = function(){ location.reload(); } Thanks in advance,
  14. Okay so as you can see I have built one. I originally used Slick and hacked it about to make it auto advance but it was super laggy and not very reliable. Slick created a good basis (cloned slides etc) so I left that in but disabled the rest of the slider functionality I've then created functions to move the slides with GSAP and re run the function on complete to auto advance the slides. I've also added a pause on hover and next and previous arrows to navigate more quickly. This all generally works but it is slightly laggy on safari (It's okay but if i add text to the slide it becomes hard to read, I've tried creating a CSS animation which is smoother but I can't get the extra features to work) Also I'd need to do some tweaking to get the timing to work consistently with different width items as it's set to a fixed 3s per slide Any help much appreciated, I feel like there may well be a much better way to do this with timelines or something similar
  15. malballah


    Hi all, I have a question, How to implement html smooth marquee with gsap ? regards.