Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

rala

Members
  • Posts

    11
  • Joined

  • Last visited

rala's Achievements

  1. Hi, I have multiple sections and want to pin each section while scroll through the page , but I don't want the next section start before the end of content of the previous one. my target is to get the effect of parallax effect without using background images in the code pen example I've been added I don't know what is the error I've made could you please help me
  2. rala

    Animate flag smooth

    Hi, I'm trying to animate flag but when add the animation the top part of flag cut and the animation not smooth .
  3. rala

    motion path

    Thank you you answer while I was including scroll Trigger in the JS panel🙈 but why at some point the astronaut disappear from the viewport I want it to always appear for the user while he is scrolling.
  4. rala

    motion path

    Hi, I update my view Box but I don't think this is the problem because I want my path to fill the whole page height which is 3000px and when I did that the animation not complete can you please help me ?
  5. rala

    motion path

    Hi, I try to use path from illustrator in place of the one is used in the motion path example but the astronaut didn't continue the animation may I know why this happened. thanks in advance
  6. rala

    ScrollTrigger animation

    yes I think so , but may I ask you what the scrub exactly do ? I have another question please when I have multiple items in the same section and I want to animate them one after another when the section appears in the viewport for the user before I add the scroll Trigger to the timeline I did this by add label to the timeline but after I add the scroll Trigger all the items appears at the same time (note: the items not have the same CSS class or the same animation) and thank you so much for the quick answer
  7. Hi, why the animation when I add the scroll Trigger become not smooth and every item in the row appears suddenly
  8. Hi, I don't want any one to fix my code I try a lot of the examples on the code pen when start learning gsap and I thought I understand everything about it and I decide to do my own project to see if I can start every thing from scratch but now after your notes I notice that there are a lot off things that still not obvious for me and that is what I want from support also I ask about specific sections in my project the flower along the dashed path and the third section which stuck on from and not animate anyway thank you
  9. Hi, this is me again I fixed all the notes you told me about yesterday and make my code as small as possible. but I still have issues with my code and some points I didn't understand even I read the documentation and see many examples . 1- the third section which includes the hands didn't appear and the animation not start I stuck on from although I delete the visibility 2- the flower which is move on the dashed path at some point it disappear and not continue the movement . 3-and the big problem for me is the values of start and end of the animation and to be honest curranty I try random values until reach the value I want. what I mean I want the animation in every section not start until the user see this section and when I use to repeat the animation when the user come back again to the section to happened smoothly not suddenly items disappear and show again please help me to understand how to control the start and end of the animation with scroll Trigger plugin
  10. Hi I'm new to GSAP and I'm working on scrollTrigger animation plugin but I have some issues may you please help me ? Thanks in advance the section of hand first : didn't work until I create new timeline I don't know why second : it's animate only one time and some time I reach the section and everything is appear my third question is how to make the ainmation repaet each time I enterback again //gsap.registerPlugin(MotionPathPlugin); jQuery(document).ready(function($){ const random = (min, max) => { return Math.floor(Math.random()*(max-min) + min); } const makeVisible = (target) => { var tl = new gsap.timeline(); tl.to(target, { visibility: 'visible' }); return tl; } const displayBody = () => { var tl = new gsap.timeline(); tl.to('.minion', { visibility: 'hidden' }); tl.fromTo('#center-rock', { visibility: 'visible', <!-- x: random(-300, 300), --> <!-- y: random(-100, 0), --> scale: 0.3, <!-- rotateZ: random(0, 360), --> }, { <!-- rotateZ: 0, --> <!-- x: 0, --> <!-- y: 0, --> scale: 1, duration: 0.6, ease: 'bounce' }, '0'); return tl; } const displayRocks = (target, to) => { var tl = makeVisible(target); tl.fromTo(target, { opacity: 0, scale: 0.3, }, { opacity: 1, scale: 1, ease: 'bounce.in', duration: 0.3, }, '0'); return tl; } const displayDarkShadow = () => { var tl = makeVisible('#dark-shadow') tl.fromTo('#dark-shadow', { opacity: 1 }, { opacity: 0.4, repeat: 1, yoyo: true, duration: 0.5 }, '0'); return tl; } const jump = () => { return gsap.to('.rocks', { transformOrigin: 'center', y: -50, yoyo: true, repeat: 1, ease: 'bounce.out' }) } const displayClouds = (target) => { var tl = makeVisible(target); var tl = makeVisible(target); tl.fromTo(target, { opacity: 0, scale: 0.2, }, { opacity: 1, scale: 1, duration: 0.5 }, '0'); return tl; } const displayLights = (target) => { var tl = makeVisible(target); tl.fromTo(target, { opacity: 0, height: 0, }, { opacity: 1, height: '100%', duration: 0.5 }, '0'); return tl; } const displayPapers = () => { const ids = ["#p1", "#92", "#p3", "#p4", "#p5", "#p6", "#p7", "#p8", "#p9"]; ids.forEach((id,index) => { console.log("#paper"+(index+1),'"#paper"+(i+1)'); gsap.from("#paper"+(index+1), { opacity:0, visibility:0, duration: gsap.utils.random(1.5, 2.3), yoyo: true, ease: "power1.inOut", motionPath:{ path: "#p"+(index+1), align: "#p"+(index+1), // autoRotate: true, alignOrigin: [0.5, 0.5] }, delay:3, onComplete: function() { document.body.classList.add('float-papers'); } }); }); } const displayLamp = () => { var tl = new gsap.timeline(); tl.fromTo('#lamp-group', { visibility: 'visible', x: random(-300, 300), y: random(-100, 0), scale: 0.3, rotateZ: random(0, 360), }, { rotateZ: 0, x: 0, y: 0, scale: 1, duration: 0.6, ease: 'bounce' }, '0'); return tl; } const dispalyMountain = (target, to) => { var tl = makeVisible(target); tl.fromTo(target, { opacity: 0, scale: 0.3, }, { opacity: 1, scale: 1, ease: 'bounce.in', duration: 0.3, }, '0'); return tl; } const dispalyLampClouds = (target) => { var tl = makeVisible(target); tl.fromTo(target, { opacity: 0, scale: 0.2, }, { opacity: 1, scale: 1, duration: 0.5 }, '0'); return tl; } const displayLightAnimation = () => { var tl = new gsap.timeline(); tl.fromTo('#blur2', { scale: 0.8, repeat:-1, }, { scale: 1, duration: 2, ease: 'Power1.easeInOut', yoyo:true, repeat:-1, }, '0'); return tl; } const displayCloudAnimation = (target,y) => { var tl = new gsap.timeline(); tl.from(target,{ y: "+="+y, ease: 'Power1.easeInOut', repeat:-1, yoyo:true, duration:1.5, }); return tl; } const displayHand = () => { var tl = new gsap.timeline(); tl.to('#hand-group', { visibility: 'hidden' }); tl.fromTo('#hand-group', { visibility: 'visible', rotate:-100, x:'-100%' }, { x:0, rotate:0, yoyo:true, duration:1.5 }); return tl; } const displayOctopusHand = () => { var tl = new gsap.timeline(); tl.to('#octpus-group', { visibility: 'hidden' }); tl.fromTo('#octpus-group', { visibility: 'visible', rotate:100, x:'100%' }, { x:0, rotate:0, yoyo:true, duration:1.5 }); return tl; } const displayHandFlower = () => { var tl = new gsap.timeline(); tl.fromTo('.hand-flower img', { opacity:0, y:-100 }, { yoyo:true, opacity:1, y:0 }).to("#turbulence",{ attr: { baseFrequency: '0 0' } }); return tl; } let sections = gsap.utils.toArray(".animate-section"), currentSection = sections[0]; //gsap.set("body", {height: (sections.length * 100) + "%"}); // create a ScrollTrigger for each section sections.forEach((section, i) => { ScrollTrigger.create({ start: () => (i - 0.5) * innerHeight -200, end: () => (i + 0.5) * innerHeight + 200, //start: 'top+=100 top', //end: 'bottom+=100 bottom', scrub:1, // onToggle: self => self.isActive && setSection(section), markers:true }); }); var master = new gsap.timeline(); master.add(displayBody(), 'checkpoint-1') master.add(displayRocks('#left-rock')); master.add(displayRocks('#right-rock')); master.add('checkpoint-3'); master.add(jump()).add(displayDarkShadow(), 'checkpoint-3'); master.add(displayClouds('#left-cloud'), 'checkpoint-3+=1').add(displayClouds('#right-cloud'), 'checkpoint-3+=1.3'); master.add(displayLights('#left-light'),'checkpoint-3+=0.8') .add(displayLights('#tiny-light'), 'checkpoint-3+=0.8') .add(displayLights('#center-shadow'), 'checkpoint-4+=0.8') .add(displayPapers(), 'checkpoint-4+=50'); master.add(displayLamp(), 'checkpoint-5') master.add(dispalyMountain('#left-mountain')); master.add(dispalyMountain('#right-mountain')); master.add('checkpoint-6'); master.add(dispalyLampClouds('#cloud-left'), 'checkpoint-6+=0.5') .add(dispalyLampClouds('#cloud-right'), 'checkpoint-6+=0.5'); master.add('checkpoint-7'); master.add(displayLightAnimation(), 'checkpoint-7') .add(displayCloudAnimation('#cloud-left',10), 'checkpoint-7+=0.1') .add(displayCloudAnimation('#cloud-right',15), 'checkpoint-7+=0.2'); var masterHands = new gsap.timeline({ ScrollTrigger:{ start: () => (i - 0.5) * innerHeight -200, end: () => (i + 0.5) * innerHeight + 200, scrub:1, markers:true } }); masterHands.add('checkpoint-8'); masterHands.add(displayOctopusHand(), 'checkpoint-8') .add(displayHand(),'checkpoint-8+=1.3') .add(displayHandFlower(),'checkpoint-8+=3'); //Lilac path : jQuery('#lilac-path').height(document.body.clientHeight - 200); //jQuery('#path-svg').height(document.body.clientHeight - 200); // The start and end positions in terms of the page scroll const offsetFromTop = innerHeight; const pathBB = document.querySelector("#path").getBoundingClientRect(); const startY = pathBB.top - innerHeight + offsetFromTop; const finishDistance = startY + pathBB.height - offsetFromTop; //console.log('pathBB.top:'+pathBB.top,'innerHeight:'+innerHeight,'offsetFromTop:'+offsetFromTop); //console.log('finishDistance:'+finishDistance); // the animation to use var tween = gsap.to("#lily",{ scrollTrigger: { trigger: "#path", scrub: true, start: "top+=40 center", end: "bottom center" }, duration: 90, //paused: true, ease: "none", motionPath: { path: "#path", align: "#path", autoRotate: true, alignOrigin: [0.5, 0.5] } }); });
  11. rala

    Suggest

    Hi, why do the showcases not provide code in order to understand the logic and techniques are used. in this https://kids.maplefromcanada.ca/ I don't understand how the effect of page transition and menu effect done I try to study this showcases in order to can using GSAP professionally but there is no details about each project . I also try to search for advance courses but not found
×