Jump to content
Search Community

Page Tailoring

Premium

  • Posts

    20

  • Joined

  • Last visited

 Content Type 

Posts posted by Page Tailoring

    ScrollTrigger + Snap + SmoothScroll

    in GSAP

    Posted

    Hi, I think i looking of solution of this problem some time now. I was Just thinking to post it. 

     

    There is good and simple pattern to have ScrollTrigger with continuous snapping. If you mix it with your code it should work

    But I don't think is way to mix it with SmoothScroll to use LAG EFFECT. 🤷‍♂️

    What I looking to use it with text :)

     

    Pattern for ScrollTrigger with continuous snapping:

     

    See the Pen abRrQgq?editors=1010 by bartek-stawiarski (@bartek-stawiarski) on CodePen

     

     

     

     

    use matchMedia with scrolltrigger 'pin' in nuxt3, will get error after breakpoint change.

    in GSAP

    Posted

    Is it nuxt with SSR? I have problems when moved from nuxt 2 to 3. Now I'm moving all gsap to composables and loadding them onMounted, nothing before.

      

    <template>
	<div ref="dom">....</div>
</template>
 
<script setup lang="ts">
const dom = ref(null)
const ctx = ref(null)
 
onMounted(() => {
  const { initSomeScrolltrigger } = useScrollers()
  initSomeScrolltrigger(dom.value, ctx)
})
onUnmounted(() => {
  const { cleanGsapContext } = useBasicAnimations()
  cleanGsapContext(ctx)
})
</script>
    const initSomeScrolltriger = (scope, context) => {
    context.value = gsap.matchMedia()
    context.value.add(matchMediaConditions, (ctx) => {
      const { isMobile } = ctx.conditions
      const s = gsap.utils.selector(scope)

		(...)
    })
  }
    const cleanGsapContext = (ctx) => ctx.value.revert()

     

    Observer.create / ScrollTrigger.observe / get / kill

    in GSAP

    Posted

    I just developing web page with ScrollTrigger, and want to add Observe. When I use ScrollTrigger.observe there is no way to catch it and kill it.

    gsap.getById and ScrollTrigger.getById dosn't work. I think it would be logical to ScrollTrigger.getById would work for it. For exempel to kill it 🙈  Yust idea 🧐

     

    happy tweening 

    On Complete play new timeline

    in GSAP

    Posted

    (same person, on to accounts :)
    Is complicated, it is quite long code. It is page o swiper and I wrote separate animations to change all slide. When i going forward I'm using slideAnim[x].play(), when going back slideAnim[x].reverse(). I have 13 steps. It's working perfect when I moving one step, between slides. Now I'm traying make animations for step n slides. 

     

    I have some basic function for this: 

    function handleAnimations(previusSlide, activeSlide) {

	console.log('f: handleAnimations');	

	if (activeSlide > previusSlide) {

		console.log('active -> ' + activeSlide);
		console.log('previus -> ' + previusSlide);

		if (activeSlide - previusSlide === 1) {
		
			slideAnim[activeSlide].play();
			mySwiper.allowSlideNext = false;

			setTimeout(() => {
		
				mySwiper.allowSlideNext = true;
				previusTransitionTime = nextTransitionTime;
				nextTransitionTime = slideAnim[activeSlide].duration() * 1000 + 100;
				console.log(`transition ${previusSlide} -> ${activeSlide} took ${nextTransitionTime / 1000}s`);
		
			}, nextTransitionTime);
		} else {

			/// work evemple 0 -> 2

			if ((activeSlide === 2) && (previusSlide === 0)) {

				console.log('test handling');

				let master = gsap.timeline();
				master.add(slideAnim[1], 0).add(slideAnim[2], 0);

				console.log(master);
				console.log(slideAnim[1]);
				
				master.play();

			} else

			console.log('handle me down');

		}

	} else {

		console.log(previusSlide - activeSlide);

		if (previusSlide - activeSlide === 1) {

			slideAnim[previusSlide].reverse();
			mySwiper.allowSlidePrev = false;

			setTimeout(() => {
		
				mySwiper.allowSlidePrev = true;
				nextTransitionTime = previusTransitionTime;	
				previusTransitionTime = slideAnim[previusSlide].duration() * 1000 + 100;
				console.log(`transition ${activeSlide} -> ${previusSlide} took ${previusTransitionTime / 1000}s`);
		
			}, previusTransitionTime);
		} else {

			console.log('handle me up');
		}
	}
}

    (there is to blocking swiper for time of animations)

     

    from:

    console.log(master);
    console.log(slideAnim[1]);

     

    I have:

    1798744254_Screenshot2019-11-28at15_43_19.thumb.png.2d5e256d96a89d0542b77288358447a0.png

     

    So in function console.log(slideAnim[1]) is visible and it have 1.7s (second 0.9) and master animation have duration 0. It's starts and finish at  17.611? <- that strange.

     

     

     

    On Complete play new timeline

    in GSAP

    Posted

    Hi, how to do it in gsap3.

     

    this don`t work :(

      

    var tl1 = gsap.timeline();
tl1.to(...); //add whatever animations.

var tl2 = gsap.timeline();
tl2.to(...); //add whatever animations

var tl3 = gsap.timeline();
tl3.to(...); //add whatever animations;
       
var master = gsap.timeline();
master.add(tl1).add(tl2).add(tl3);

//now you can control everything with master!

//jump to the middle of the entire sequence, for example
master.progress(0.5);

    i have: 

    const 	longTime = .6,
		time = .3,
		shortTime = .15,
		longOverlap = '-=0.6',
		overlap = '-=0.3',
		shotOverlap = '-=0.15',
		easeingInOut = 'circ.easeInOut',
		easeingOut = 'circ.easeOut',
		easeingIn = 'circ.easeIn',
		popUpEase = 'elastic.out(1.5, 1)'
		;

slideAnim[1] = gsap	.timeline() // slider no.1
.to('.tv', {duration: longTime, y: '-=55vh', ease: easeingInOut})
.to('.header', {duration: longTime, y: '-=102%', opacity:0, ease: easeingInOut}, overlap)
.to('.container.-hero', {duration: longTime, opacity: 0, ease: easeingInOut}, 0)
.set('.swiper-wrapper', {zIndex:'6'})
.to('.darknes', {duration: longTime, opacity:.4 ,ease: easeingInOut})
.fromTo('.container.-chatbot', {duration:time, opacity:0 ,ease: easeingInOut}, {opacity:1}, overlap)
					.pause();


slideAnim[2] = gsap	.timeline() // slider no.1 
.to('.container.-chatbot', {duration:time, opacity:0 , ease: easeingInOut})
.fromTo('.container.-ready', {duration:time, opacity:0 ,ease: easeingInOut}, {opacity:1})					
.pause();


let master = gsap.timeline();
master.add(slideAnim[1]).add(slideAnim[2]);


				
master.play();

     

     

    on console.log(master) i have:

    Timeline {vars: {…}, _tDur: 0, _dur: 0, _delay: 0, _repeat: 0, …}

     

    Please, help me :) 

    How can I use GSAP 3 with scroll magic?

    in GSAP

    Posted

    Hi, all :) 

     

    I resigned from "animations.gsap" ScrollMagic plugin and handle this like that:

     

      

    import { gsap } from "gsap";
import ScrollMagic from 'ScrollMagic';

const controller = new ScrollMagic.Controller();

const easeInOut = 'circ.easeInOut';
const time = .5;

const menuAnim = gsap.timeline({defaults:{ease: easeInOut, duration: time}})
	.to('nav', {y: '-100%'})
	.to('#logo', {opacity: 1}, "-=0.4")
	.to('.main-nav', {opacity: 1}, "-=0.4")
	;
menuAnim.pause();	          

new ScrollMagic.Scene({
    triggerElement: '#home',
    duration:0,
    triggerHook: .85
    })
    .on("enter", function (e) {
        menuAnim.play();
    })
    .on("leave", function (e) {
        menuAnim.reverse();
    })
    .addTo(controller);

     

    • Like 2

    Attr Plugin Problem

    in GSAP

    Posted

    @PointC yes, adobe XD giving a crazy number, that are coordinates for the whole document, not for the exported group of paths.

    I have a new file with smaller coordinates. But still, I don't know how to move a path.

     

    Now I have translate(81.157 34.104) and I want to add 50 to x. (thx @OSUblake)

     

    <path id="Path_23" data-name="Path 23" class="cls-3" x="0" y="0" d="M585.648,443.9q-4.442,0-5.492-3.826l-17.472-59.584q-1.667-5.921-7.836-5.923h-1.975a1.759,1.759,0,0,0-1.727,2.222l18.768,64.329q3.083,10.986,15.734,10.986c.11,0,.205-.014.313-.017v-8.227c-.113,0-.2.038-.313.038" 
        transform="translate(81.157 34.104)"/>

     

    Best I have come up with, is: 

    logoAnimation.from('#Path_23', 4, {attr:{transform: "121.157 33.538" }, ease: Expo.easeInOut});

     

    And in chrome dev tools it look ok, transform="translate(81.157 34.104)" is changing ok.

    But consol giving me 233 errors like:

     

    TweenMax.min.js:17 Error: <path> attribute transform: Expected transform function, "81.178 34.103".

     

    And path is disapering during animation.

     

    Do you have idea how I should that write?

     

    it is still here: http://links.stawiarski.eu/AttrPluginProblem/

     

    I have put it codepen:

     

    Attr Plugin Problem

    in GSAP

    Posted

    Hi,

     

    I'm trying animate SVG path with attrPlugin. I can't find any docs about it.

     

    Can I use Attr Plugin to move path exatly x:30?

     

    Path is from Adobe XD export.


    Path like this for exemple:

              <path id="Path_23" data-name="Path 23" class="myGreen" d="M601.019,474.723q-6.417,0-7.933-5.526l-25.239-86.07q-2.408-8.553-11.319-8.555h-2.854a2.541,2.541,0,0,0-2.494,3.21l27.111,92.925q4.454,15.87,22.728,15.87c.158,0,.3-.02.452-.025V474.667c-.163,0-.287.055-.452.055" transform="translate(-3723.339 3675.66)"/>

     

    this dosen't work: 

          var logoAnimation = new TimelineMax();
      
      logoAnimation
            .from('#Path_23', 4, {attr:{x:30}, ease:Linear.easeNone});

     

     

    http://links.stawiarski.eu/AttrPluginProblem/

     

     

    After finding a solution, the real question should be:


    How to animate transform (x,y) of elements SVG Adobe exported file?

     

    Answer:


    The easiest way is to use CSSPlugin and use relative values, like x: "-=180".

     

     

    See the Pen bPPrwa?editors=1010 by bartek-stawiarski (@bartek-stawiarski) on CodePen

×
×
  • Create New...