I'm trying to make the images on this page rotate, scale and change opacity all at the same time, like some images on this site do;
http://soyouwanttogotorisd.com/
And this is my site;
http://www.ducklingfarm.com
I'm using TweenMax, and this is my code;
$(document).ready(function() {
TweenMax.from( $('#homeImg'), .5,
{css:{scale:.05, opacity:0, rotation: 180}, ease:Quad.easeInOut}), 400,-400);
});
But nothing's happening...
Please help me!
Thanks!
Found an answer!
http://forums.greensock.com/topic/8480-scale-rotate-and-opacity/#entry33133
I used this code;
$(window).load (function(){
TweenMax.from( $('.homeImg > img'), 0.5,
{css:{scale:0.05, opacity:0, rotation: 180},
ease:Quad.easeInOut
});
});
Related
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
I'm trying to upload a local image to a konvajs stage and then erase parts of the image that are not needed. My upload works well and the draw/erase work but I'm unable to erase the uploaded image. I can only erase the draw line over the image.
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
I have created a jsfiddle: https://jsfiddle.net/tommy6s/L3f27mch/
I read two stackoverflow posts similar to mine that featured a round eraser tip but I still could not figure out how to get mine to work.
Any help is appreciated. Thank you.
For this demo I was using separate <canvas> element for drawing canvas.
You can draw your image directly into canvas via context:
img.onload = function() {
context.drawImage(img, 0,0, width/2, height / 2)
layer.draw();
};
Demo
I have jqplot donut chart where I want to add chart labels in the center part. Also want to add scrolling for labels in the middle of graph. So only 1-2 labels in the center will be visible and rest will be visible when user scrolls.
Please have a look attached image. As per my knowledge, we can't add labels in the center of chart. Is there any way to do this? Appreciate your help.
My current code is as below:
<script type="text/javascript">
var _chart5_plot_properties;
_chart5_plot_properties = {
title: " ",
"seriesDefaults":{
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
sliceMargin: 0,
innerDiameter: 220,
startAngle: -90,
barPadding: 0,
padding: 3,
}
},
grid: {
shadow: false,
drawBorder: false,
shadowColor: "transparent"
},
highlighter: {
show: true,
tooltipLocation: "sw",
useAxesFormatters:false
}
}
plot2 = $.jqplot("chart2", chart_data, _chart5_plot_properties);
I couldn't find an option for this in jqPlot.
Though, jqPlot has 8 options to position the legend, but it does not have the center option. jqPlot Legend Locations
But after tweaking it a bit, I could accomplish it using jQuery. Since we need to require jQuery to render/draw jqPlot charts, so I thought of using jQuery rather than pure Javascript.
I have used two functions defineDimensionsForLegendTable(parentContainerID, dimensions) and fixLegendsToCenter(parentContainerID)
Other important things that you should not miss out while using these functions
Make sure you include the jquery.jqplot.js, jqplot.pieRenderer.js, jqplot.donutRenderer.js, jquery.jqplot.css files (or the minified versions - .min.js)
Set placement to outsideGrid in legendOptions
legend: { show:true, placement: 'outsideGrid' }
Give a higher z-index to the legend-table
#chart2 .jqplot-table-legend{
z-index: 99999;
}
Find the working fiddle here - jqPlot Donut Chart with legend in the center
Note: If the chart does not show up in Google Chrome, try opening it in Firefox or some other browser.
Remove the console.log lines from the code ;-)
You can use Foundation or Bootstrap to beautify the scrollbar. :-)
Hope it helps :-)
I'm using the Anystretch jQuery plugin to fill the area of a <div> with rotating images. At first an intro image fades in, and then the rotation starts. I'm using the images loaded in to an array, and then chosen at random:
$('body.home div.home-slider').anystretch(sliderImages[0], {speed: 250});
setTimeout(function(){
setInterval(function(){
var chooseNewImage = Math.floor(Math.random() * 4);
$('body.home div.home-slider').anystretch(sliderImages[chooseNewImage]);
}, 2500);
}, 3000);
What I'd like to happen with the rotation is for the images to cross-fade/transition. Is this possible? Can someone lend a hand as to how to achieve this?
I'm want to make an application for Galaxy Tab, that allows me to draw pictures... Something similar to MS Paint (don't ask my why :)) so the first steps are:
win = Ti.UI.createWindow({
backgroundColor: 'black',
exitOnClose: true
});
image = Ti.UI.createImageView({
width: 200,
height: 200
});
image.addEventListener('touchmove', function(e){
//And here I need somehow to draw a pixel on image at e.x, e.y coordinates
// How can i do it?
});
So, how should i draw a pixel?
sorry I have not read you full Question.
try This, this is a Titanium Appcelerator Module and this is absoultely free
It have also a easy example. You can use easy.
Again Really Sorry..