Hello everyone I'm trying to make a complex animation And I'm new to the framer motion so I need help if it's possible.
I'm trying to do this animation
all the animation will be revealed when scrolling but I don't Know How?
I tried this example but I think it will not take me any where example
So, Any clue please?
Thanks in advance.
i think useAnimationControls will help, but i think there is another better solution or another way, but any way i wish this help you here is the documentation, it says that it returns a promise (and also can be used in async function with await).
like the following code:
import { useAnimationControls, motion } from "framer-motion"
export default function App() {
let controls = useAnimationControls()
controls
.start({
opacity: 1,
backgroundColor: "red",
color: "white",
})
.then(() =>
controls.start({
color: "black",
backgroundColor: "lightgreen",
x: -100,
})
)
.then(() => {
controls.start({
opacity: 0,
x: 100,
})
})
return (
<>
<motion.div initial={{ opacity: 0 }} animate={controls}>
hi there
</motion.div>
</>
)
}
the above code will do these things below respectively:
will increase the opacity to 1 and change the color & bg color
then it will change color & bg color again and change the x position
then will decrease the opacity to 0 and x position too
here is another animation library that is simple and also may be useful to use named animejs, and also they have a friend and non-boaring documentation you can check it here
Related
First things first. I absolutely love GSAP and their Scrolltrigger. Everything works fine, but unfortunately, the object I move on the x-axis based on scroll does not update when the user resizes his browser window.'
The x value is based on a formula I wrote.
Here is a part of the function later added in a master timeline with matchMedia Scrolltrigger:
var seoShowBenefitsTl = gsap.timeline();
seoShowBenefitsTl.addLabel("first Benefit")
.to(".anim-screen-item-0", {opacity: 0, duration: 0.5}, "first Benefit")
.to(seoATFHardware, {x: () => (document.documentElement.clientWidth - seoATFHardware.clientWidth) / 2 + calculateOffsetToElement(document.querySelector('.anim-point-item.--revenue'), 120, "right"), duration: 1, ease: Power3.in, onUpdate: function() {
if (this.progress() >= 0.5) {
document.querySelector('.anim-screen-item.--revenue').classList.add("js-screen-item-engaged");
document.querySelector('.anim-point-item.--revenue').classList.add("js-point-item-engaged");
} else {
document.querySelector('.anim-screen-item.--revenue').classList.remove("js-screen-item-engaged");
document.querySelector('.anim-point-item.--revenue').classList.remove("js-point-item-engaged");
}
}}, "first Benefit")
//some more code
return seoShowBenefitsTl
Thank you so much in advance!
Make sure you add the actual tween to the ScrollTrigger timeline, not a timeline. This helps making sure the values get update easier because of the following point.
Use invalidateOnRefresh: true on the ScrollTrigger timeline.
Doing those things results in this demo.
I am new to Phaser 3 Framework , but have expertise in Angular/Ngrx.
Currently , I am creating a Custom Phaser 3 Game Editor using Angular/Ngrx. Need to modify background color of the Phaser 3 Game at run time.
In Phaser 2+ version ,
Below code set background color of the game ,
game.stage.backgroundColor = "#4488AA";
But how to set game background color in Phaser 3 irrespective of scene ?
Do we need to set via Camera like below?
this.cameras.main.setBackgroundColor(0xbababa)
Please guide me.
If you want the same background color regardless of the active scene, Phaser 3 has a backgroundColor property in the GameConfig object. You can see the documentation here and a working version here.
const config = {
type: Phaser.AUTO,
width: 600,
height: 700,
backgroundColor: '#4488aa',
scene: {...}
};
You also have the option of creating a transparent canvas for the game and using a div underneath it to change the background color. To do this, you'll use the transparent property of the GameConfig object. You'll also want to make sure you use the parent property as well with a corresponding <div id="gameContainer"></div> in the HTML to make it easier to grab and modify the color beneath the canvas.
const config = {
type: Phaser.AUTO,
width: 600,
height: 700,
parent: 'gameContainer',
transparent: true,
scene: {...}
};
Then, in the create method, you'll grab that parent item and modify the color:
create() {
var div = document.getElementById('gameContainer');
div.style.backgroundColor = "#4488AA";
}
You can see a working version here.
In my React Native project I'm using the Switch component. It can be switched directly by pressing it, but I also want to let the user change it by pressing nearby related items.
It of course animates the switching when pressed, but when I changed its state using setState() it just jumps directly to the other position without animation.
Is there a way I can programmatically trigger the animation when changing its state from code?
(There is a question with a similar wording but it seems to be to an unrelated problem I can't quite work out.)
Depends a little on the approach you're taking, but I'd say your best bet is with Animated (which is part of React Native).
You can do something like this:
render(){
var animVal = new Animated.Value(0);
Animated.timing(animVal, {toValue: 1, duration: 300}).start();
var animatedViewStyles =
{
marginLeft: animVal.interpolate({
inputRange: [0, 1],
outputRange: this.state.switchOn ? [100, 0] : [0, 100],
}),
// add some other styles here
color: 'green'
};
}
return (
<Animated.View style={animatedViewStyles}>
<TouchableHighlight onPress(() => this.setState({switchOn: !this.state.switchOn}))><Text>This is my switch</Text></TouchableHighlight>
</Animated.View>
);
See the docs https://facebook.github.io/react-native/docs/animated.html for more info.
Angular 1 handles enter, leave and move animations. The Angular 2 documentation describes how to do enter and leave animations (void => * and * => void), but how can one implement move animations in Angular 2?
Read Angular's official guide for animations if you haven't already.
You define animation states and the transitions between them. For instance:
animations: [
trigger('heroState', [
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
transition('inactive => active', animate('100ms ease-in')),
transition('active => inactive', animate('100ms ease-out'))
])
]
inactive and active can be replaced with any arbitrary strings and you can have as many unique states as you wish, but there must be a valid transition to each one or else the animation won't happen. void is a special case for when elements aren't yet attached to the view and * is a wildcard, applying to any of the defined states.
EDIT:
Hmm... well, for one thing, you might be able to use this Sortable library. It claims to support Angular 2 and is pure Javascript (no jQuery) so theoretically, it should work well but I have not used it myself.
Otherwise, I am certain it would be possible purely inside Angular 2, but it would probably require some fairly clever code. Relative motion (irrespective of a component or element's particular position) is easy with transform: translateY() property. The problem is that Angular 2 animation states only apply if the component is in that state so if you give it a translateY(-20px) to move an element up a position, it's not going to keep that position if you want to want to move it up again.
See this plunker for the solution I have come up with.
template: `
<div #thisElement>
<div class="div-box" #moveState="state">Click buttons to move <div>
</div>
<button (click)="moveUp()">Up</button>
<button (click)="moveDown()">Down</button>
`,
I defined animation states for 'moveUp' and 'moveDown' that ONLY apply during the actual animation and a 'static' state that is applied when the component isn't moving.
animations: [
trigger('moveState', [
state('moveUp', style({
transform: 'translateY(-30px)';
})),
state('moveDown', style({
transform: 'translateY(30px)';
})),
state('static', style({
transform: 'translateY(0)';
})),
transition('* => moveUp', animate('100ms ease-in')),
transition('* => moveDown', animate('100ms ease-out')),
transition('* => static', animate('0ms linear'))
])
]
For the function that actually initiates the animation, it applies the 'moveUp' or 'moveDown' state and then starts a timeout that triggers a callback after an amount of time equal to the length of the transition. In the callback, it sets the animation state to 'static' (the transition to the 'static' state is set to 0 ms so we don't actually animate it moving back to a static position). Then we use Renderer to apply a translation for where we want it to ultimately end up (calculated using a position property that would define it's position relative to where it was initially, not it's position in the array). The Renderer applies its styles separately from the animation so we can apply both without them conflicting with each other.
export class MyComponent {
state = 'static';
#ViewChild('thisElement') thisBox: ElementRef;
position: number = 0;
//...
moveUp() {
this.state = 'moveUp';
this.position--;
setTimeout(() => {
this.state = 'static';
this.renderer.setElementStyle(this.thisBox.nativeElement, 'transform', 'translateY(' + String(this.position * 30) + 'px)');
}, 100)
}
moveDown() {
this.state = 'moveDown';
this.position++;
setTimeout(() => {
this.state = 'static';
this.renderer.setElementStyle(this.thisBox.nativeElement, 'transform', 'translateY(' + String(this.position * 30) + 'px)');
}, 100)
}
//...
}
This is only an example of how you can animate moves without having to define states for each possible position it could be in. As far as triggering the animations on array manipulation, you'll have to figure that out for yourself. I would use some kind of implementation with EventEmitters or Subjects to send events to the components that would then decide on whether or not they need to animate or not.
I need to animate something on a web page with the ExtJS 3.4 library loaded. The specification is to animate an element's color to red. As far as I can see from the Ext.Fx documentation this is not possible. Is there a workaround?
Alternatively, this chaining of effects:
info.fadeOut({ endOpacity: .25, duration: 2}).setStyle('color','#FF0000');
would be acceptable if the color change happened after the fadeOut ended, but there seems to be no way to specify a callback function.
Try animate method and color animation type:
info
.animate(
{
opacity: { to: .25 }
},
0.5,
null,
'easeOut',
'run'
)
.animate(
{
color: { to: '#FF0000' }
},
0.5,
null,
'easeOut',
'color'
);
Working sample: http://jsfiddle.net/yRGUw/