rala
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by rala
-
-
Hi, I'm using an example found on the forum in order to make a seamless slider as a marquee for the team free long image, and its works fine but I'm trying now is to reverse the animation when the mouse is on the left to start from the left and make the animation start from right when the mouse is on the right but until now I don't like the result
-
Hi, I follow the example in codepen to fade in content in the same section and it's work,but my problem is on mobile the text overlapping other sections as in the code we set gsap.set(elem, {position: "absolute", top: 0});for the text div and the parent container has only 100vh height which is not enough on mobile what can I do to solve this issue and keep the scroll Trigger and pin even on mobile
See the Pen GREdeXe by GreenSock (@GreenSock) on CodePen
-
@Dennyno I think your code is stop working 🙄
-
@Dennyno can you explain how do you think in order to achieve the result ? because I don't like to only copy and paste code from others.
I also try tom make the canvas background transparent but it didn't work
-
Because it make the website visitors stay more time in your website 😁
-
Hi, this website using GSAP https://advanced.team/
can I know how they make mouse effect with GSAP and how the color of shape change when mouse move ?
I see this example but my question is about the shape
Thanks in advance
See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen
-
Thank you so much for your explanation I really appreciate your helping and the quick. Response in the forum thank you .
But can you please explain more or send a reference link to know why scrub and scroll actions conflict
-
Hi, when I try to animate svg elements when the section in the viewport something wrong happened an the animation start suddenly and not smooth
I used label to first animate lamp and mountains and clouds at the same time then I want to repeat -1 the animation of the lamp light and the cloud floating could you please help me to know the error I've made .
-
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
-
-
motion path
in GSAP
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.
-
motion path
in GSAP
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 ?
-
motion path
in GSAP
-
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
-
-
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
-
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
-
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]
}});
}); -
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
Change slider direction on mousemove
in GSAP
Posted
Thanks a lot for your help each time I used GSAP discovered that I know nothing about it. or maybe the examples always simple not have advance cases with explain I want to ask is there advance course in GSAP which can help me to professional when using GSAP with any website ?