Search the Community

Hi, I would like to transform my first SVG to second SVG while scroll or On-load. The problem is, my svg doesn't contain the path directly and it has some shadow effect too. I tried to follow the official video instruction and it doesn't seems to work. Is there any way to achieve this with morphSVG or I need another plugin? I'm a beginner here so, any help would be much appropriated. Many Thanks Sajidul

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(); } }

Hi everyone it's me again, thanks Zach Sucier and Cassie help me compelete last Issue, result like this url: https://codesandbox.io/s/gsap-marquee-test-6zx2d?file=/src/App.js I face another question is could timeline animation repeat start before the last item finish animation? lastItem(first round timeline animation) ---- firstItem(second round timeline animation)----secondItem(second round timeline animation) should I add another timeline follow the previous one?

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

Hey guys! I have been lurking the forum since last few days. I have found a lot of useful information thanks for the great support. I am looking to smoothen the animation in my codepen by doing following: - fasten the timescale of tweens when 'onmouseover' so the div stop quickly but gracefully - Also smothen the tweening overwrite happening while moving the cursor fast I think the best way would be to use a timeline to update timescale but I am having trouble to figuring that out. Thanks in advance

How to update the timeline values now? Imagine a scenario that you have a box moving in the x axis, and when you scroll you stop the auto animation and move it with scroll value, and when you stop scrolling it updates de current value and resume the timeline again. In the previous version timeline.update did that pretty well

I am trying to add a defaults values for my fromTo(), I tried putting defaults: {} inside gsap.timeline({}) as below const tl_shapes = gsap.timeline( { defaults: { opacity: 0 } }, { defaults: { opacity: 1 } } ); function step_shapes_animation () { return tl_shapes .fromTo( ".step-2 .shapes img:first-child", { x: -200 }, { x: 0, duration: duration } ) .fromTo( ".step-2 .shapes img:last-child", { y: -200 }, { y: 0, duration: duration }, "-=0.4" ); } I am not sure if this is the right way to do it but second element doesn't seem to work and it starts with initial opacity: 1 and I guess it is because fromTo() has 2 objects and I can't put 2 objects for defaults. I am wondering if there is a right way to do it.

Hi, firstly - many thanks for great GSAP suite. I'm using it for first time and that's really easy to set up. I have just one question about restart the animation/timeline. I have 2 timelines and both animate different element and that's just fine. Animation is good and if you refresh the page everything looks correct. But if you click on Repeat button animation starts in 0.5 seconds so you can't see, that text is not coming to content (to specific position - from 0% to x%) but appears in content (apperas in x%). I noticed that it relates to overlapping ( 4th parametr in method to() ) if I delete the overlapping (mine is "-=0.2") restart is fine but not the move of the text. It arrives from sides and stops (for a few miliseconds) and then continues correctly. But I need smooth move so I used the overlapping but it cause problem with restart... I created a demo on CodePen - http://codepen.io/anon/pen/tDGiz?editors=001 I dont know what to do with it and I would be thankful if you could help me. Thank you. P.S.: Sorry for my english :-\