How do I implement the ticker used in framer with framer motion? - javascript

<AnimatePresence>
<ul className='AnimationLine'>
{
data.map((item) => (
<motion.li
key={item.id}
initial={{
y: "100%",
opacity: 0
}}
animate={{
y: "-100%",
opacity: 1
}}
exit={{
y: "-100%",
opacity: 0
}}
transition={{
duration: 0.5,
loop: Infinity,
type: "ticker",
speed: 1,
// direction: "bottom",
align: "center",
gap: 10,
padding: 10
}}
whileHover={{
scale: isHovered
? 1.2
: 0.5
}}
onHoverStart={() => setIsHovered(true)}
onHoverEnd={() => setIsHovered(false)}>
{item.name}
</motion.li>
))
}
</ul>
</AnimatePresence>
I've implemented it this way, but it doesn't loop properly. I ask for help. Thank you.
enter image description here
For your information, the attributes in Framer are the same as the image.

Related

Unable to render component onClick event - react

I am essentially to display a Login/Signup card when a user clicks on the sign up button of my website. However, the component I am trying to render on click is not showing up. Below is my code -
import "./homePage.css";
import signupCard from "../signupCard/signupCard"; // .jsx file
import { motion } from "framer-motion";
function Header() {
return (
<>
<div className="header">
<ul>
<motion.li
className="li__signup"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.9 }}
transition={{ type: "spring", stiffness: 400, damping: 70 }}
onClick={(e) => {
e.preventDefault();
<signupCard />; // **trying to render card here**
}}
>
Sign Up
</motion.li>
<motion.li
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.9 }}
transition={{ type: "spring", stiffness: 400, damping: 70 }}
>
Contact
</motion.li>
<motion.li
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.9 }}
transition={{ type: "spring", stiffness: 400, damping: 70 }}
>
About
</motion.li>
</ul>
</div>
<img src="../assets/image.png" alt="placeholder" />
</>
);
}
export default Header;

Every Component in react must be in the render and not in an event function.
Consider doing:
import { useState } from "react";
import "./homePage.css";
import signupCard from "../signupCard/signupCard"; // .jsx file
import { motion } from "framer-motion";
function Header() {
const [isOpened, setIsOpened] = useState(false);
return (
<>
{isOpened ? <signupCard /> : null}
<div className="header">
<ul>
<motion.li
className="li__signup"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.9 }}
transition={{ type: "spring", stiffness: 400, damping: 70 }}
onClick={(e) => {
e.preventDefault();
setIsOpened(true)
}}
>
Sign Up
</motion.li>
<motion.li
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.9 }}
transition={{ type: "spring", stiffness: 400, damping: 70 }}
>
Contact
</motion.li>
<motion.li
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.9 }}
transition={{ type: "spring", stiffness: 400, damping: 70 }}
>
About
</motion.li>
</ul>
</div>
<img src="../assets/image.png" alt="placeholder" />
</>
);
}
export default Header;

A couple of things.
Return what you want to be rendered from your component. In this case return SignupCard from your component.
Use uppercase characters for react components. So SignupCard instead of signupCard (change it in the source file and the import). Refer to this.
import "./homePage.css";
import SignupCard from "../signupCard/signupCard"; // .jsx file
import { motion } from "framer-motion";
import { useState } from "react";
function Header() {
const [opened, setOpened] = useState(false);
return (
<>
{ opened ? <SignUpCard> : null }
<div className="header">
<ul>
<motion.li
className="li__signup"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.9 }}
transition={{ type: "spring", stiffness: 400, damping: 70 }}
onClick={(e) => {
e.preventDefault();
setOpened(true);
}}
>
Sign Up
</motion.li>
<motion.li
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.9 }}
transition={{ type: "spring", stiffness: 400, damping: 70 }}
>
Contact
</motion.li>
<motion.li
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.9 }}
transition={{ type: "spring", stiffness: 400, damping: 70 }}
>
About
</motion.li>
</ul>
</div>
<img src="../assets/image.png" alt="placeholder" />
</>
);
}
export default Header;

My React App styles are rendered differently on localhost and after deploying

I created a React app and styled it with Material UI. I'm a beginner and to get my idea right, I've been using inline CSS which might look pretty messed up. So the WebApp is a multi-step form that slides up or down to the viewport for each step. The idea is from TypeForms.
The problem for me primarily lies in the margins. Where to make it responsive, I check the window width and height and accordingly changed the margins. These work perfectly on the localhost when I change the width and height on the browser. But after deploying it to my free tier Amplify server, the margins go off.
I'll show you what I mean in the Screen Shots.
*The first is deployed and second is localhost.
the code for one of the blocks is like this and others have mostly the same styles:
<Box className={`${classes.formStep} ${step === 5 ? classes.formStep2 :
(step > 5 ? classes.formStep1 : classes.formStep3)}`}>
<Grid container spacing={0} style= {{display:'flex',width:'80%', marginLeft:'0%',marginTop:windowSize.current[0] < 325 && windowSize.current[1] < 570 ? '-20%' :windowSize.current[0] < 380 && windowSize.current[1] < 680 ?'-10%': windowSize.current[0] < 425 && windowSize.current[1] < 750 ? '-10%': windowSize.current[0] < 485 && windowSize.current[1] < 855 ?'-12%': '-0%'}}>
<Grid item xs={11} style={{display:'flex'}} >
<div style={{color: 'blue',
marginRight: 0,
fontSize: '16px',
fontFamily:'Karla, sans-serif',
lineHeight: '24px',
verticalAlign:'baseline',
letterSpacing:'normal',
wordSpacing:'0px',
margin:'0px',
padding:'0px 0px',
textAlign:'start',
fontWeight:400}}>{step}</div>
<ArrowForwardIcon style={{color: 'blue',
fontSize: '16px',
fontFamily:'Karla, sans-serif',
lineHeight: '24px',
verticalAlign:'baseline',
letterSpacing:'normal',
wordSpacing:'0px',
margin:'0px',
padding:'0px 0px',
textAlign:'start',
marginTop:'4px',
fontWeight:400}}/>
<p style={{color: '#ffffff',
marginLeft: 5,
fontSize: '2rem',
fontFamily:'Karla, sans-serif',
lineHeight: '32px',
verticalAlign:'baseline',
letterSpacing:'normal',
wordSpacing:'0px',
margin:'0px',
padding:'0px'
}}>Your Availability?</p>
<br/>
<br/>
<br/>
</Grid>
<FormControl style={{marginLeft:'10%', }}>
<FormGroup container style={{color:'#ffffff'}}>
<FormGroup item xs={6}>
<FormControlLabel
control={
<Checkbox
checked={serve1}
onChange={() => setServe1(!serve1)}
style={{color:'#ffffff'}} />
}
label="8:00 am"
/>
</FormGroup>
<FormGroup item xs={6}>
<FormControlLabel
control={
<Checkbox
checked={serve2}
onChange={() => setServe2(!serve2)}
style={{color:'#ffffff'}}/>
}
label="10:00 am"
/>
</FormGroup>
</FormGroup>
</FormControl>
<FormControl container style={{color:'#ffffff'}}>
<FormGroup>
<FormControlLabel
control={
<Checkbox
checked={serve3}
onChange={() => setServe3(!serve3)}
style={{color:'#ffffff'}} />
}
label="12:00 pm"
/>
</FormGroup>
<FormGroup>
<FormControlLabel
control={
<Checkbox
checked={serve4}
onChange={() => setServe4(!serve4)}
style={{color:'#ffffff'}} />
}
label="6:00 pm"
/>
</FormGroup>
</FormControl>
</Grid>
<div style={{
display:'flex',
marginRight:'40%'
}}>
<Button onClick={handleDown} style={{
backgroundColor:"#2121FC",
color:'#ffffff',
fontSize:'18px',
fontWeight:'700',
fontFamily:'Karla, sans-serif',
lineHeigth:'24px',
verticalAlign:'baseline',
letterSpacing:'normal',
padding:'6px 14px',
width:'100px',
height:'60px',
borderRadius:'5px',
}} endIcon={<CheckIcon style={{fontSize:'25px'}} />} >
OK
</Button>
</div>
</Box>
Another Step:
<Box className={`${classes.formStep} ${step === 4 ? classes.formStep2 :
(step > 4 ? classes.formStep1 : classes.formStep3)}`}>
<Grid container spacing={0} style= {{display:'flex',width:'80%', marginLeft:'0%', marginTop:windowSize.current[0] < 325 && windowSize.current[1] < 570 ? '-20%' :windowSize.current[0] < 382 && windowSize.current[1] < 680 ?'-15%': windowSize.current[0] < 425 && windowSize.current[1] < 750 ? '-10%': windowSize.current[0] < 485 && windowSize.current[1] < 855 ?'-7%':windowSize.current[0] < 485 && windowSize.current[1] < 900 ?'-15%': '-0%'}}>
<Grid item xs={11} style={{display:'flex'}} >
<div style={{color: 'blue',
marginRight: 0,
fontSize: '16px',
fontFamily:'Karla, sans-serif',
lineHeight: '24px',
verticalAlign:'baseline',
letterSpacing:'normal',
wordSpacing:'0px',
margin:'0px',
padding:'0px 0px',
textAlign:'start',
fontWeight:400}}>{step}</div>
<ArrowForwardIcon style={{color: 'blue',
fontSize: '16px',
fontFamily:'Karla, sans-serif',
lineHeight: '24px',
verticalAlign:'baseline',
letterSpacing:'normal',
wordSpacing:'0px',
margin:'0px',
padding:'0px 0px',
textAlign:'start',
marginTop:'4px',
fontWeight:400}}/>
<p style={{color: '#ffffff',
marginLeft: 5,
fontSize: '2rem',
fontFamily:'Karla, sans-serif',
lineHeight: '32px',
verticalAlign:'baseline',
letterSpacing:'normal',
wordSpacing:'0px',
margin:'0px',
padding:'0px'
}}>Your Team?</p>
</Grid>
<Box m={4}>
<Select
style={{width:'250px', marginLeft:'0%',
marginTop:'5%',
color:'#ffffff',
fontSize:'24px',
fontFamily:'Karla, sans-serif',
border: 'none',
borderBottom: '3px solid blue',
background: 'none'
}}
label="Select..."
id="team"
value={subTeam}
defaultValue=''
onChange={(e) => {setTeamError(false)
setSubTeam(e.target.value)}}
required={true}
>
{team && team?.map((option) =>
(
<MenuItem style={{background:'none', border:'none'}} key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
</Box>
{teamError? <p style={{color:'red', marginLeft:'10%', marginTop:'2%', background:'white'}}>Team is required... </p>: null}
<div style={{
display:'flex',
marginRight:'20%',
marginTop:'5%'
}}>
<Button onClick={handleTeamDown} style={{
backgroundColor:"#2121FC",
color:'#ffffff',
fontSize:'18px',
fontWeight:'700',
fontFamily:'Karla, sans-serif',
lineHeigth:'24px',
verticalAlign:'baseline',
letterSpacing:'normal',
padding:'6px 14px',
width:'100px',
height:'60px',
borderRadius:'5px',
}} endIcon={<CheckIcon style={{fontSize:'25px'}} />} >
OK
</Button>
</div>
</Grid>
</Box>
Mui Styles:
const useStyles = makeStyles((theme) => ({
formContainer: {
height: '100vh',
overflow: 'hidden',
position: 'relative',
},
formStep: {
position: 'absolute',
left: 0,
right: 0,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
transition: theme.transitions.create(['transform'], {
easing: theme.transitions.easing.easeInOut,
duration: theme.transitions.duration.standard,
}),
},
formStep1: {
transform: 'translateY(-150%)',
},
formStep2: {
transform: 'translateY(150%)',
},
formStep3: {
transform: 'translateY(950%)',
},
}));
The styles vary greatly for other screen sizes also. Appreciate for looking into it and helping out.

React Spring animation slowing down

I have a react-spring simple rotation animation with adjustable speed. But once I sett the speed to full (setting duration to 10ms) and returning it to lower even 1 second, it wouldn't animate properly and rather gets lagging.
Here is the animation preview
https://3l3kb.csb.app/
And here is the sandbox https://codesandbox.io/s/spring-anim-test-forked-6wno4
And here is the code
export default function App() {
const [reverse, setReverse] = useState(false);
const [speed, setSpeed] = useState(50);
const rotation = useSpring({
from: { transform: "rotate(0deg)" },
to: { transform: "rotate(360deg)" },
loop: true,
reset: true,
config: { duration: 10 + (100 - speed) * 10 }
});
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
{/* <animated.div>
<animated.h1>{num.get().toFixed(2)}</animated.h1>
</animated.div> */}
<div
style={{
width: "300px",
height: "300px",
position: "relative",
margin: "auto"
}}
>
<animated.div
style={{
...{
...rotation,
marginLeft: "auto",
position: "absolute",
color: "purple",
fontSize: "130px"
}
}}
>
T
</animated.div>
</div>
<input
type="range"
value={speed}
onChange={(e) => setSpeed(e.target.value)}
style={{
marginTop: "100px",
width: "500px"
}}
/>
</div>
);
}

Having a different image shown on each Marker hover on a Map

Currently I am using ReactMapGL as my Map component. Here I'm using its HTMLOverlay feature to bring a full screen popup whenever I hover above a marker. I have currently set different image data for all my markers, but when I hover over the marker I only get the 1 same image for all of them. How do I get the marker to show its respective image?
I've added a codesandbox for better reference:
https://codesandbox.io/s/full-popup-mapbox-stackoverflow-forked-p8934?file=/src/App.js:1540-1551
Here's my code:
<ReactMapGL
{...viewport}
mapboxApiAccessToken={YOURMAPBOXTOKEN}
mapStyle="mapbox://styles/mapbox/dark-v9"
onViewportChange={(viewport) => {
setViewport(viewport);
}}
>
{posts &&
posts.map((item) => (
<HTMLOverlay
redraw={(props) => {
{
/* todo: grow animation from center */
}
return (
<div
style={{
backgroundColor: "rgba(255, 0, 0, 0.5)",
width: isPopupShown ? props.width : 0,
height: isPopupShown ? props.height : 0,
transition: "all .2s ease-in-out",
transform: "scale(1.1)",
overflow: "hidden",
alignItems: "center",
justifyContent: "center"
}}
>
{/* todo: text/content position */}
<img src={item.backgroundImage} alt="bg" />
</div>
);
}}
/>
))}
{posts &&
posts.map((item) => (
<Marker
key={item.id}
latitude={item.latitude}
longitude={item.longitude}
>
<button className="marker-btn">
<img
style={{
width: 48,
height: 48
}}
onMouseEnter={() => {
setSelectedProperty(item);
setIsPopupShown(true);
}}
onMouseOut={() => {
setSelectedProperty(null);
setIsPopupShown(false);
}}
alt="Marker"
/>
</button>
</Marker>
))}
</ReactMapGL>

You'd have to selectively render the HTMLOverlap for whatever pin is currently hovered over.
{selectedProperty && (
<HTMLOverlay
redraw={(props) => {
{
/* todo: grow animation from center */
}
return (
<div
style={{
width: isPopupShown ? props.width : 0,
height: isPopupShown ? props.height : 0,
transition: "all .2s ease-in-out",
transform: "scale(1.1)",
overflow: "hidden",
alignItems: "center",
justifyContent: "center",
backgroundImage: `url(${selectedProperty.backgroundImage})`,
backgroundSize: "cover",
backgroundRepeat: "no-repeat"
}}
>
{/* some text */}
</div>
);
}}
/>
)}
Here's a sandbox with working example.

How to remove the line divider in the 'react-native-calendar-picker' after selecting a date range

I'm implementing the allowRangeSelection in https://www.npmjs.com/package/react-native-calendar-picker but the problem is the vertical line divider is present between the Tuesday, Wednesday and Thursday ,Friday when selecting a range date as seen in the image.
Does anyone know how to remove the vertical line or this is a known issue in the library?
I tried putting borderSize: 0 in selectedRangeStyle but still not working.
Here is the code:
<CalendarPicker
ref={props.forwardedRef}
previousComponent={
<MaterialIcons
name="keyboard-arrow-left"
size={22}
style={{ color: app.color.TEXT_100_HIGH, marginLeft: scale(18) }}
/>
}
nextComponent={
<MaterialIcons
name="keyboard-arrow-right"
size={22}
style={{ color: app.color.TEXT_100_HIGH, marginRight: scale(18) }}
/>
}
textStyle={{ color: app.color.TEXT_300_HIGH, fontWeight: "bold" }}
todayBackgroundColor="transparent"
todayTextStyle={app.color.currentDayCalendarText}
disabledDatesTextStyle={{ color: "#445870" }}
customDayHeaderStyles={() => {
return {
textStyle: { color: app.color.TEXT_200_MEDIUIM, opacity: 1 },
};
}}
dayLabelsWrapper={{
borderTopWidth: 0,
borderBottomWidth: 0,
marginLeft: scale(40),
}}
startFromMonday={true}
selectedRangeStartStyle={{
backgroundColor: app.color.calendarDefaultDateColor,
}}
selectedRangeEndStyle={{
backgroundColor: app.color.calendarDefaultDateColor,
}}
selectedRangeStyle={{
backgroundColor: app.color.calendarDefaultDateColor,
}}
selectedDayColor={app.color.calendarDefaultDateColor}
selectedDayTextColor={"#FFFFFF"}
/>
Sample picture of the calendar

Categories