Search the Community

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

I have applied id="smooth-wrapper" and id="smooth-content" by wrapping with div. But it is not working. I followed https://codesandbox.io/s/stupefied-minsky-pzceim?file=/src/App.js:733-752 but couldn't understand how to apply ScrollSmoother in these component based structure.

Hello Guys, it's my first Forum Article. I'm using GSAP for nearly a year now. I'm using GSAP + GsapSmoothScroll + ScrollTrigger and Barba.js I have some slightly complex Animations on my Site and its extremely laggy on iPhone Safari I tried a lot of Solutions that I found hear, but nothing really works. Does someone have some Ideas how to fix. Here is a Link to the Website: This is my config for the ScrollSmoother. The Lag is specially on the page uid42 thats the link i put in hear. The other pages are ok not perfekt but ok: I hope its enough information. scroll = ScrollSmoother.create({ smooth: 0.2, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements ignoreMobileResize: isMobile() && !document.querySelector("#uid1") ? true : false, normalizeScroll: isMobile() && !document.querySelector("body:not(#uid42)") ? true : false, }) On a Mission (hantha.net) Hope someone could help me.

code sandbox link (I was messing with this file and forgot to fork it, so I apologize, the file is now as it should be) In my little basic nextjs demo here (link above), I have set up an idea for a page I have where it would use a fixed position layout as you see here. I have three questions that are hopefully not too long: 1. Is this a good way to set up such a layout with gsap (using stacked, standard flow elements, in this case, the yellow and green lines in the middle of the page (which would be hidden in the actual site) to trigger the scrolling animation) or do you think there is a better way to achieve this? 2. If I scroll any amount of distance and hit refresh, the page doesn't reload from the beginning it just reloads and the scroll bar remains in place. What should I do to make it start back from scratch when I refresh the page? 3. I was trying out smooth-scroller, got it to work and it's very nice of course; however, If I have A setup like this in nextjs with these fixed elements which the smooth-scroller docs say to put outside the smooth content wrapper, I would have the main content in a wrapper (this wrapper would have smooth-scroller) then the fixed elements in their own parent div and then wrap all of that in say a react fragment or div because of course this is react and all components must only render one element. But when I do that smooth-scroller doesn't work anymore, So I'd love to see how smooth-scroller would get applied to this setup. Also, is there a way to make smooth-scroller work in code sandbox?

Hi, I've been trying to get something to work and after browsing the forums and google, reading a lot of topic and trying a lot of things. I am currently at a roadblock where I have no clue how to continue. Explanation I have a wrapper and 3 sections, what I envision is that my wrapper is pinned and my first section is always visible on load (this works). Upon scrolling down I want to fade out my first section and fade in the second section with a scrub (this also work). Now where I am stuck is, is that I want to have specific elements within the section to fadeIn and stagger and/or add a class when said section is currently active. I already tried using 'toggleClass()' but this seems to work globally and not per section that fades in. Here's a codepen of what I currently have. Any help is appreciated!

Hello! my specific problem is that I'm trying to figure out how to disable ScrollTrigger animation when the screen width is under 800px. My guess is that I have to use matchMedia? and maybe .disable()? But I can't really get it to work. Any help is appreciated! I recreated the issue in the provided Codepen

Hello! Im having trouble dynamically updating the value of the endScale, currently it is 0.2; but i am after an effect where the scale updates and changes based on window resize function(). I have tried implementing this but unfortunately having a few troubles.

Hi, I am working on a box system that users can open and have an animation to show what they have won. At the moment it is not working. const wrapper = document.querySelector(".c-container"); const boxes = gsap.utils.toArray(".c-item"); const wins = gsap.utils.toArray(".win"); let itemWidth = boxes[0].clientWidth; let wrapWidth = boxes.length * itemWidth; function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function getPosWinner(winner) { const boxes = gsap.utils.toArray(".c-item"); const index = boxes.findIndex((box) => (box = winner)); console.log(index); let itemWidth = boxes[0].clientWidth; let wrapWidth = boxes.length * itemWidth; let desiredStart; if (index === 0) { desiredStart = 0; } else { desiredStart = index * itemWidth; } let minDistanceToEdgeAllowed = 4; var desired = winner; var minPos = desiredStart + minDistanceToEdgeAllowed; var maxPos = desiredStart + itemWidth - minDistanceToEdgeAllowed; return getRandomInt(minPos, maxPos); } var spin; spin = gsap.timeline({ smoothChildTiming: true, autoRemoveChildren: true, //onComplete: openModal }); spin.set(boxes, { x: (i) => i * itemWidth, }); var pos = getPosWinner(wins[0]); spin.to(boxes, { duration: 7, delay: 0.2, ease: "circ.inOut", x: "-=10000", modifiers: { x: (x, target) => { const s = gsap.utils.wrap( -itemWidth, wrapWidth - itemWidth, parseInt(x) ); return `${s}px`; }, }, }) .to(boxes, { duration: 3, ease: "none", x: pos * -1, }); console.log(wins[0]); function openModal() { var myModal = document.getElementById("WinItem"); const modal = new Modal(myModal); modal.show(); } The JS code <div class="slider-container shadow rounded"> <BIconCaretDownFill class="fs-2 trigger" /> <BIconCaretUpFill class="fs-2 triggerTwo" /> <div class="c-container pt-1"> <div class="boxes"> <div v-for="item in lootItems" :key="item"> <div class="c-item" :class="{ win: item._id === winningItem }"> <LootboxContent class="lootboxItem text-light" :loot="item" /> </div> </div> </div> </div> </div> The container with items I start with making a array of items that people can win these items are inside the container. then I get the pos of the winning item. when I got that I spin the boxes a couple of times and then it should stop at the winning object (in the middle of the container) how it looks right now How it looks after its finished Hope you can help me. Thanks in advance edit: simplified codepen: https://codepen.io/nightfly-student/pen/OJQvGzN

I am trying to apply tweens to several elements into an array that I am looping though. I have created 4 timelines, two entrances and two exits for two sets of items. I am getting this error on the first timeline (assuming it would apply to all four) I can't use a codepen link because I am doing this in SL for a client. But I can at least post the source code. I assume there is something simple but I am just not seeing it. const player = GetPlayer(); const menuOpen = player.GetVar('boolean_menuOpen'); const menu = document.querySelectorAll("[data-acc-text='TOC-Modal']"); const searchFor = 'TOC-Modal-Slide'; const accessibilityItems = document.querySelectorAll("[data-acc-text]"); const slides = []; const menuReady = (bool) => { return bool; }; const slidesReady = (bool) => { return bool; }; const showButton = (bool) => { return bool; }; const menuEntrance = gsap.timeline({paused: true, defaults: { duration: 0.5, scaleX: 0, scaleY:0, opacity: 0, ease:"back.inOut(1.2)" } }); const menuExit = gsap.timeline({paused: true, defaults: { duration: 0.5, scaleX: 1, scaleY:1, opacity: 1, ease:"back.inOut(1.2)" } }); const slidesEntrance = gsap.timeline({delay: 0.1, paused: true, defaults: { duration: 0.25, scaleX: 0, scaleY:0, opacity: 0, ease:"back.inOut(1.2)" } }); const slidesExit = gsap.timeline({delay: 0.1, paused: true, defaults: { duration: 0.25, scaleX: 1, scaleY:1, opacity: 1, ease:"back.inOut(1.2)" } }); menu.forEach((item) => { item.style.opacity = 0; item.style.transformOrigin = 'center'; console.log(typeof item) if(!menuOpen) menuExit.to(item, { onComplete: menuReady, onCompleteParams: true }); else menuEntrance.to(item, { onComplete: menuReady, onCompleteParams: true }); }); accessibilityItems.forEach((item) => { if(item.getAttribute('data-acc-text').includes(searchFor)) slides.push(item); }); slides.sort((a,b) => { const valueA = a.getAttribute('data-acc-text').split('-')[3]; const valueB = b.getAttribute('data-acc-text').split('-')[3]; return valueA - valueB; }); slides.forEach((slide) => { slide.style.opacity = 0; console.log(typeof slide) if(!menuOpen) { slidesExit.to(slide, { opacity: 0, onComplete: slidesReady, onCompleteParams: true }); player.SetVar('boolean_menuAnimationComplete', false); } else { slidesEntrance.to(slide, { opacity: 1, onComplete: slidesReady, onCompleteParams: true }); player.SetVar('boolean_menuAnimationComplete', true); } }); if(menuReady && slidesReady) { if(!menuOpen) { menuExit.play(); slidesExit.play(); } else { menuEntrance.play(); slidesEntrance.play(); } }

How can i chain timelines which waits for the last one to finish? Do i have to calculate manually the length of the last timeline added with tl.add(tl1) (tl1.duration())? I would like to play the added timelines as "chained clips", same behavior as tl.to() or tl.from(), but for timelines, not individual animations. const tl1 = getMy10sAnimation1() //gsap.timeline() ...to().to().to()... const tl2 = getMy2sAnimation1() //gsap.timeline() const tl3 = getMy7sAnimation1() //gsap.timeline() const masterTl = gsap.timeline({repeat: -1}) .add(tl1) .add(tl2) .add(tl3) // expected result: // ----------- // -- // --------- // repeat // but i get: // ----------- // -- // -------

Hello Everyone I Want a Jelly Blob which Follows the Mouse and Squuezes and Rotates To Match the Mouse Move Direction The Probelm is The When The Angle of Rotation Switches from 0 to 180 or -180 or from -180 to Positive, The Jelly Blob Changes Direction Suddenly Giving a Jittery And Bad Animation. You can test this out by just Following the Mouse in a Circular Motion, and The Jelly Blob will keep Switching Direction . If Anyone Can Fix This it Would be very Helpful Thanks In Advance.

Hi! I'm new to javascript and found gsap while trying to animate some objects. I was trying to animate this sequence of squares to create a gallery effect but the result is very unpredictable, sometimes works all fine, but when i hover from one square to another some squares don't reverse the animation and end up in wrong positions. It's like if when i play a timeline right after another, and both timelines have animations to a certain objetc, the first timeline overrides the second and then, the objects end in the wrong position. How can i avoid this? Another issue i'm having is that i wanted both properties "scale" and "transform" to change the object simultaneously (i believe this way the animation would be smoother), but the way it is, the object first scales and then transforms. Does anyone knows what am I missing? Thanks a lot!

I've been struggling with the issue for 3 days, rewriting, refactoring code few times. Please help me if possible, guys. I use ReactJS and GSAP to create different computed animations ( overlays over a video ). What happens is that when I seek to specific percentage completed, for example 0.19 out of 49s timeline total length, it does seek to the first 1s part of the animation timeline cycle, and doesn't show the animation at the stage expected based on the progress percentage. I couldn't upload project to codesandbox as 1) it is nda signed and 2) it says that it has exceeded the 500-module items limit; I'm really sorry for that. Could someone please help me? I can share the source code or give access to my github repository. Thanks in advance everyone! import gsap from 'gsap'; import RightTitleStyles from '../../../../styles/right-title.module.css'; import React from 'react'; interface RightTitleProps { range: Object; name: string; currentTime: number; isPreview: boolean; type: 'smaller' | 'bigger'; isVisible: boolean; style: any; subtitle: string; title: string; } const RightTitle = React.memo( ({ videoRef, setStyle, range, name, currentTime, isPreview, type, isVisible, style, title, subtitle, }: RightTitleProps) => { const titleRef = React.useRef(); const { current: tl } = React.useRef(gsap.timeline({ paused: true })); const [ rangeIntervals, setRangeIntervals ] = React.useState< Array< number > >( range.timeIntervals ); const connectTitleRef = ( el : HTMLElement ) => { if (titleRef.current || !el || !videoRef || isPreview ) { if ( isPreview || !el || rangeIntervals === range.timeIntervals ) { return; } else { tl.killAll(); // just clearing out some tweens for repeated recreation } } tl.progress(1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0])); titleRef.current = el; console.log( titleRef.current.id, videoRef, ); console.log('configuring...'); tl.fromTo(videoRef, { width: '100%' }, { duration: 1, width: '63%' }).to(videoRef, { duration: range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1, width: '63%' }).to(videoRef, { duration: 1, width: '100%' }); console.log( 'video configured', ); tl.fromTo( el, { x: name === 'Right Title' ? 150 : -150 }, { duration: 1, x: 0 }, ) .to(el, { x: 0, duration: range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1, }) .to(`#${ el.id }`, { duration: 1, x: name === 'Right Title' ? 150 : -150, }); console.log(range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1); }; // console.log( style, ); React.useEffect(() => { if (!titleRef.current || isPreview) return; console.log( 'styles applied to titleRef', titleRef.current._gsTransform ); console.log( 'these are tweens', tl.getChildren().map( child => child.vars.x || child.vars.width ) ); console.log( 'these are tweens', tl.getChildren().map( child => child.vars ) ); if (!(range.timeIntervals[0] <= currentTime && currentTime <= range.timeIntervals[1])) { console.log( 'current timing doesn`t fit the intervals' ); setStyle({}); tl.progress(0); return; } setStyle({ marginLeft: name === 'Left Title' ? 'auto' : 'unset', marginRight: name === 'Right Title' ? 'auto' : 'unset', }); tl.progress(1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0])); console.log(range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1) console.log( currentTime, range.timeIntervals, 1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0]), ); }, [range.timeIntervals, currentTime]); const show = isVisible; if ( isPreview ) { return <div style={{ top: type === 'smaller' && 0, height: type === 'smaller' && '100%', ...style }} className={RightTitleStyles.aligningWrapper} > <div style={{ transform: isPreview && 'scale(0.55)' }}> <h1> {title} </h1> <p> {subtitle} </p>{' '} </div> </div> } return ( <div ref={ connectTitleRef } id={`${isPreview ? 'previewMode' : 'notPreviewMode'}3${range.color.slice(1)}`} style={{ visibility : !( currentTime + 1 >= range.timeIntervals[0] && currentTime - 1 <= range.timeIntervals[1] ) ? 'hidden' : 'visible', top: type === 'smaller' && 0, height: type === 'smaller' && '100%', ...style }} className={RightTitleStyles.aligningWrapper} > <div style={{ transform: isPreview && 'scale(0.55)' }}> <h1> {title} </h1> <p> {subtitle} </p>{' '} </div> </div> ); } ); export default RightTitle; Title.tsx animation.tsx

Good day, I am trying to figure out a way to have the animation run individually by the same class. I read the page about the common mistake on the loop but still couldn't figure it out. I know Im supposed to use the array but code did not run. can someone help me please?

Good day, I want to create a text reveal animation as shown on the codepen as a scrolltrigger. To have the animation starts when the trigger reached the middle of the screen when scrolled. Can someone help me?

Hello, I am having a problem in making motions with Scroll Trigger. I am trying to make an SVG appear when triggered, and disappear after a few scrolls. I tried making two separate timelines for each motion, which did not work at all... ,and I have also tried using .reverse( ) or .fromTo( ) with no avail. Would any of you guys teach me how to make my SVG appear and later on disappear using the scroll trigger? To get the precise image of what motion I am trying to make: I want this appearing and disappearing to be triggered through scrolling. I am sorry, I cannot provide a codepen of my project (as I do not have the pro to upload the svg assets), instead I will clip a video of what I my current circumstance. I am trying to make the forest kinda thing sink out of the view after another stroke of scrolls. Please help me out here. Sincerely,

Hi guys, a bit new to this gsap thing. I saw a few threads around here talking about how to use gsap for landing animations that also utilise localstorage. I have some code at the moment for this, but it seems as if gsap is breaking on the initial load, cancelling the animation entirely import React, {useRef, useEffect} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import Nav from './nav' import {TweenMax} from 'gsap' ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'); ); export default function App() { let app = useRef(null); let loader = useRef(null); var animPlayed = localStorage.getItem("loadingAnimPlayed"); console.log(animPlayed); if (!animPlayed) { // This is the localstorage animation to be run. console.log("Loader run"); TweenMax.to(loader, 1, { opacity: 1, onComplete: function() { localStorage.setItem("loadingAnimPlayed", true) } }) } useEffect(() => { TweenMax.to(app, 0, {css: {visibility: "visible"}}) }, []) return ( <> <div className="loader" ref={el => {loader = el}}></div> <div className="page" ref={el => {app = el}}> <div className="header"> <Nav /> </div> </div> </> ) } I get a series of errors on the first load, when the condition of the animation are met, the main one being: "TypeError: Cannot add property _gsap, object is not extensible" I'm not sure how to fix my code in order to get the animation to run. Any ideas?

Hi Guys, Im a Developer from Germany so please excuse my English.. I need to create an Image Sequence and it should behave like this: You would scroll down until you have the Sequence in the Center of the Viewport, then the Viewport would be pinned (for example) and the Sequence starts. As soon as the Sequence is complete you could scroll further on the page. Is that possible with GSAP? I tried Scroll Magic and failed but i don´t have any experience with Green Sock.. I attached a Picture of the concept.. the Picture you see in there is actually a GIF implemented as an image Sequence. So as soon as the whole brown Module is in view, Scrolling of the ViewPort would be disabled until the Image Sequence is finished. The Live URL (not finished) is here. Maybe you guys have an Idea.. I would be really thankful! Greetings from Germany, Finn

Thank you for creating such an amazing tool for animation and supporting community. I have a question about way how Gsap is creating an order of properties for transform while tween/set. As i understand based on documentation, skew properties come after scale properties (this is exactly what i need), but when im trying on a practice i see the opposite result where skew is coming before scale properties. Can you please help me to understand why this happen and how can i change this? I have attached codepen comparing two results: first one i've set up using css and pick the order by myself, second order was created using gsap set. Im working on complex animation, part of this animation using scale and skew properties, but im getting wrong result when skew coming before scale. Thank you so much.

I am currently renewing my portfolio. And notice that I don't have enough skills for what I want to implement. It's only about the home page of my portfolio, I would continue the rest myself. I need help for the following. the following should be done Fullscreen slider (with my works) with text animation, image / video liquid animation on hover Page transition for the selected work in the slider (without content only the transition) simple page transition for other page (like about,..) Preloader animation Hover animation of the navigation points Draggable/Scrollable endless grid (with image and on hover 'optional' gif/video) - on scrolling/dragging a little liquid effect ) I have a page here in which direction it should go.Here is the link for example (slider show, page transition, hover animation and at the bottom left when clicking on the layer icon the endless grid ) https://heycusp.com I would provide the designs as well the necessary animation. I hope someone can support me there (and can also implement this as in the example) and make my work a little easier. For info only I'm not a company or agency, i'm a ux / ui designer. Please send a message or answer to this topic (with the days you need for it and what you want for it). Cheers Mr.A

I have a React component that I'm trying to toggle the width of when a button is clicked. When the button is clicked again, it goes back to the original width. The problem is the original width could be anything, depending on the viewport size as it's responsive. On small devices it's 75%, large it's 25% with a few others in the middle. There's also another animation that animates the opacity and position of the element I'm targeting here. Here's what I have so far; useEffect(() => { const tween = gsap.to(slashRef.current, { width: '100%', ease: 'power3', paused: true, }); if (menuOpen) { tween.play(); } else { tween.reverse(); } }, [menuOpen]); I've tried starting it as paused, and when the `menuOpen` is true it animates the width fine. When it's `false` it's not reversing it back to its original position as I would expect — clearly I'm missing something. I've tried a bunch of different approaches using state and ref to set the original width and trying to access that but I've had no joy so far. I'm sure it's something simple I'm missing. Thanks for any help, Chrish

So, in the Codepen we have a fairly simple animation. On click of the button, we animate the <header> and <nav> elements in, and click it again, we animate them out. It's a toggle button. However, on mobile, we don't want to run the animation but instead want things to appear instantly. We have achieved this using calls to progress(0) or progress(1), however, we've noticed that if you first toggle the animation on desktop, and then go to mobile, and toggle it again, that without the calls to tl.reversed(false) or tl.reversed(true), the animation still tries to animate and doesn't work correctly. Does anybody have any ideas why adding those lines would make it work as I would expect it? What am I missing? To reproduce: On desktop, or anything matching the media query in the Pen (1000px), click the 'Play animation' button, then click it again to hide the animation. Reduce your screen size down to trigger the mobile code, and again, toggle the 'Play animation' button. Note: the code in the Codepen works, you'll need to remove calls to tl.reversed() on lines 18 and 21 to see the issue. Any help would be much appreciated!

Hello all-- I'm currently converting an old Codepen that uses TweenMax 1.2 to the new GSAP 3.1 lib. I've gone through the docs and converted everything per the spec, but my animations are failing to actually fire, and with no warnings in the console, I'm currently lost. My suspicion is that it boils down to these two lines being improperly formatted, but I'm not sure what's wrong. I've added firing and killing functions to both pens for testing, spawnTrees() and killTrees(). Ln 80/81: .add(gsap.to(branches, {duration: 0.5, drawSVG:'100%', ease: "power1", stagger: 0.03}), '-=0.25') .add(gsap.to(branches, {duration: 2, rotation: 0, ease: "elastic", stagger: 0.03}), '-=1.25'); For reference, below is the Codepen that I'm converting. I'm eager to see what's going on here so I can continue adding onto this animation sequence 😃 https://codepen.io/paulkmiller/pen/VwLKLpo

Hello I have to do a airplane that fly vertically left and right whenever the user scrolled, I already did it with Scroll magic and I can't figure how to do it right, i know the problem is on the path it must take full height of my container but i don't know how to do it do you have any idea guys I've been stacked for 2 days Thank you

hello! i'm new to GSAP, and honestly i have limited JS knowledge. i coded an SVG animation that works perfectly on most browsers, but we need it to work on MS Edge as well, so i'm trying to achieve it using GSAP: i manage to get the first iteration right, but then it goes out of sync. SMIL: https://codepen.io/urx/pen/XWJNgLB GSAP: https://codepen.io/urx/pen/QWwGMbq help?